Support People In Ukraine
Ukraine was invaded by Russia in the early morning of 24.02.2022, explosions thundered in Ukrainian cities, many civilians died, tens of millions are affected. Our army protects all Europe from the occupiers and it needs help now to restrain one of the biggest armies in the world. Please, donate a small amount.
I Am
Volodymyr Hudyma
<FrontEndDeveloper />
You Are Here: Home/React Antipatterns: Code Duplication

React Antipatterns: Code Duplication

September 17, 2021

Table Of Contents

    Let's clarify one thing before we start - code duplication is not necessarily a bad thing.

    In some cases, it's much better to duplicate code than to create a reusable component that accepts tons of props for handling all edge cases because it's very likely to get lost.

    But in general, good code should be written once and used when needed.

    And that's what we are going to focus on today.

    The Problem

    First, imagine you are building a complex website menu for a landing page that looks completely different on desktop and mobile.

    Each time the user clicks on the menu item, they should be scrolled down to the appropriate section.

    A pretty common scenario, right?

    This is exactly the moment when it's better to create two separate components - DesktopMenu and MobileMenu, even if we could create only one, but messy.

    DesktopMenu.jsx

    // ...
    
    const DesktopMenu = () => {
      const handleScrollTo = (section) => {
        const element = document.getElementById(section);
        if (element) {
          element.scrollIntoView({ behavior: "smooth" });
        }
      };
    
      const handleProductsClick = (e) => {
        e.preventDefault();
        handleScrollTo("products");
      };
    
      const handleAboutUsClick = (e) => {
        e.preventDefault();
        handleScrollTo("aboutUs");
      };
    
      // ...
    };

    MobileMenu.jsx

    // ...
    
    const MobileMenu = () => {
      const handleScrollTo = (section) => {
        const element = document.getElementById(section);
        if (element) {
          element.scrollIntoView({ behavior: "smooth" });
        }
      };
    
      const handleProductsClick = (e) => {
        e.preventDefault();
        handleScrollTo("products");
      };
    
      const handleAboutUsClick = (e) => {
        e.preventDefault();
        handleScrollTo("aboutUs");
      };
    
      // ...
    };

    Note that the components are basically the same, but that's only because we have skipped where the key differences begin - the render function.

    So what we see here is the duplication of three functions: handleScrollTo, handleProductsClick and handleAboutUsClick, which is not good at all.

    What options do we have here to refactor the code?

    • Extract all functions into a separate file called utils.js

      It is possible, but it's better to have event handlers inside the components than utility functions, especially if they depend on props

    • Extract all functions into parent component

      Also possible, but in this case parent component will grow in size and as with the first option, it's better to have small components responsible for their own tasks than to have large components responsible for everything.

    • Extract all functions to the custom hook

      This approach allows us to create reusable functions to share logic between functional components in React - custom hooks.

      Another benefit that does not apply to our example is that we can call other hooks within the custom hook, such as useState, useEffect, etc.

    While you can choose any of the above options and it would work just fine for our example, let's stick with the last one and create a custom hook called useScrollTo.

    Custom Hook - "useScrollTo"

    The custom hook is a simple JavaScript function that allows us to compose built-in hooks to reuse some logic between functional React components.

    The custom hook name should start with use to follow the naming convention for hooks (all hooks in React start with this word, right?).

    Create a file named useScrollTo:

    export const useScrollTo = () => {
      const handleScrollTo = (section) => {
        const element = document.getElementById(section);
        if (element) {
          element.scrollIntoView({ behavior: 'smooth' });
        }
      };
    
      const handleProductsClick = (e) => {
        e.preventDefault();
        handleScrollTo('products');
      };
    
      const handleAboutUsClick = (e) => {
        e.preventDefault();
        handleScrollTo('aboutUs');
      };
    
      return {
        handleProductsClick,
        handleAboutUsClick,
      };
    };

    It contains all the duplicated code and returns it so that it can be re-used in any component.

    Now let's fix our components.

    DesktopMenu.jsx

    // ...
    import { useScrollTo } from "./useScrollTo";
    
    const DesktopMenu = () => {
      const { handleProductsClick, handleAboutUsClick } =
        useScrollTo();
    
      // ...
    };

    MobileMenu.jsx

    // ...
    import { useScrollTo } from "./useScrollTo";
    
    const MobileMenu = () => {
      const { handleProductsClick, handleAboutUsClick } =
        useScrollTo();
    
      // ...
    };

    We imported and used the custom hook in both components, resulting in less code duplication and better readability.

    Summary

    There are many ways to reduce code duplication in React, and one of the best is to create and use a custom hook.

    Remember to check if there is already a custom hook on the web before creating your own.

    Use them as often as you can, as they are a very useful addition to React and help you organize your code in a better way.

    Newsletter
    Receive all new posts directly to your e-mail
    No spam, only quality content twice a week
    Let me know what you think about this article
    Click here to write response...