5 Common Reactjs Anti patterns everyone should learn to become Pro

ByShankar Morwal

October 11th . 5 min read

ReactJS is a powerful framework that helps developers create fast and efficient user interfaces. However, like any framework, it can be misused.

Reactjs anti-patterns are common mistakes that can lead to slow performance, difficulty maintaining code, and other problems. Some of the most common Reactjs anti-patterns include props drilling, props plowing, and huge components tree in a single component.

By understanding these Reactjs anti-patterns and how to avoid them, developers can create more efficient and scalable React applications.

Here are the common Anti patterns Reactjs developers should avoid.

Props Drilling-

Prop drilling occurs when a component must receive props from its parent component, and then pass them down to its child components.

This can create a deeply nested structure that is difficult to understand and maintain. In addition, it can make it difficult to reuse components, since they may be tightly coupled to their parents.

Therefore, it is best to avoid prop drilling by refactoring your code to reduce the depth of nesting. This will make your code more readable and maintainable and will make it easier to reuse components in the future.

To refactor the code one can use state management libraries like redux, however redux is heavy work, so sometimes context API can be a better suitable option.

Nested Components-

In ReactJS, modularization is accomplished through the use of components. It is common to use nested inline components. For example

import React from 'react';
const NestedComponent= props => {
    const ChildComponent = () => {
        return <div>Child Component</div>;
    }
    return (
        <div>
            <ChildComponent />
        </div>
    );
};
export default NestedComponent;

However, it is generally considered bad practice to nest these components too deeply.

Nested components can make the code difficult to read and understand, and they can also lead to performance issues.

Whenever the parent component will be called, the inline component will be recreated, even when the component will rerender, it will still be created, and again and again, it will leave you with a performance hole. So it is always better to create your child component separately.

So instead of writing components like the above example, a simple refactor may help in this case.

import React from 'react';const ChildComponent = () => {
   return <div>Child Component</div>;
}const NestedComponent= props => {
    return (
        <div>
            <ChildComponent />
        </div>
    );
};
export default NestedComponent;

Avoid Huge Components-

In Reactjs you can create almost a whole application in one component, there is absolutely nothing that stops you from doing that.

Any experienced software engineer will tell you that one of the worst things you can do is create a huge, monolithic component.

But why?

Here are some of the problems huge monolithic components have

Such components are difficult to maintain and test, and they often lead to code bloat. As the component size grows, it hurts the head and developers tend to make more mistakes.
It is almost impossible to reuse such components.
Due to a lot of states and props, such components re-render again and again, rerendering in eactjs components is costly. So components slow down.

That’s why Reactjs developers always strive to create smaller, modular components. By breaking up your code into smaller pieces, you can make your code more manageable and easier to work with.

In addition, small Reactjs components are more likely to be reused in other projects. As a result, they can save you a lot of time and effort in the long run.

So next time you’re starting a Reactjs project, remember to keep your components small and focused. It’s the best way to avoid problems down the road.

Index as a key prop-

Most of Reactjs developer developers write the loop like this

import React from 'react';
const ProductsList = props => {
    const products = ["watch", "phone", "football"];
    return (
        <div>
            {
                products.map((product, index) => {
                    return <div key={index}>{product}</div>
                })
            }
        </div>
    );
};
export default ProductsList;

Many of the ReactJS developers do not understand why a key prop is needed, so when even they write a loop and Reactjs will give them a warning. So they tend to use index and key prop.

Never do it again, but why?

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.

The best way to pick a key is to use a string that uniquely identifies a list item among its siblings.

In the example above name can be used as a key provided there are no duplicates in the array, in the real world, the product list will have ids as well, so Id can be a good candidate for a key prop.

import React from 'react';
const ProductsList = props => {
    const products = ["watch", "phone", "football"];
    return (
        <div>
            {
                products.map((product) => {
                    return <div key={product}>{product}</div>
                })
            }
        </div>
    );
};
export default ProductsList;

Not Memorizing Complex Calculations-

Sometimes developers may need to do heavy calculations in a Reactjs component. It is might take good computing power and slow down the component a little bit, which is ok. for example

const ComplexComponent = props => {
    const complexOutput = complexCalculationFunction(props);
    return (
        <div>
            Do Something
        </div>
    );
};
export default ComplexComponent;

But as we know component re-renders whenever there is a change in state and prop. so every time this calculation will be done again.

So what if the component can remember the calculation that was done when the factors which determine the calculation have not changed, that will be really good.

The good news is, there is useMemo present, it can be used for Memorizing the calculations.

const ComplexComponent = props => {
    const complexOutput = useMemo(() => complexCalculationFunction(props.a, props.b), [props.a, props.b]);
    return (
        <div>
            Do Something
        </div>
    );
};
export default ComplexComponent;

Developers should learn anti-patterns because they are the opposite of what you are taught to do and can help them see different ways to solve a problem.

Conclusion-

Learning anti-patterns will help developers understand why they do what they do, which will make them better at programming.

To delve more into the aforesaid subject matter you can also take a look at how we tackle this through Custom Application Development.