10 React Anti-patterns you should know
When I use react for the first time in 2019, I think react is very friendly to use and has low learning curve. After working several projects and the project become bigger and bigger I feel that my code is hard to maintain and very hard to read. Today I will show you 10 react anti-patterns that I learn when I working on my projects also tips and tricks that help you during interview.
1. Props Drilling
Some problem you might run into a big project is that you might have one component at very top that holds your state, but then you have a deeply nested component that also need to use that state. What you usually do is pass that state as a prop to a bunch of intermediate components that don’t actually need it until it finally gets to that child. This is known as prop drilling.
Solution: Use state management like Redux, Context API, etc
2. Props Plowing
Props Drilling is a vertical problem but you might also end up with horizontal problem called Props Plowing.
What might happen is that you end up witch a components that have a lot of different props and you end up with this long repetitive code where each prop has the same name as the variable passed to it.
Solution: use spread operators (…props)
3. Bad Structure
Bad structure lead to big components. I usually start building react using
create-react-app --template typescriptand start writing a whole giant component. That was intentional because usually I don’t know how I want my code to be organized initially and I don’t want to waste my time over organizing things before I even know what I want to do.
However this will make your code having one overly large deeply nested component. A component like this, is hard to understand, refactor, and test.
Solution: you can use VS code extension called Glean to refactor your code easily.
This extension will do the work for us. install it then highlight the code you want to extract into it’s own component, click the light bulb and you’ll see a bunch of options to refactor. It’s a massive time saver that I couldn’t imagine living without now.
4. Component Nesting
When you refactoring your project, you might be found another anti-pattern of nesting component
The major problem here is every time the parent component is rendered, it will also redefine the child component which means it gets a new memory address and that could lead to performance issues and unpredictable behavior.
Solution: Either not define a child component at all or to move the child component out of the parent and pass the function as a prop.
This example will show you how react is very simple on the surface but if you don’t know exactly what’s going on it’s easy to shoot yourself in the foot.
5. Heavy Work
Let’s image we have a component with two different pieces of state. On one piece of state we need to run an expensive calculation anytime the value changes.
The problem with our implementation is that any time the state changes on this component, it will rerun the calculation even though it only depends on the one count value. It’s not very obvious but you have a potential performance bottleneck here.
Solution: you can use the useMemo hook. What it will do is remember the last value and only run the actual function when it’s dependent data changes.
Read more about useMemo, useCallback, and React.memo here.
6. Useless Divs
When Defining a brand new component, you get an error trying to return two sibling elements together. That’s because every component can have only one root element, so what you might do is wrap it with a div that works perfectly fine. But it leads to a bunch of unnecessary divs in the markup.
Solution: react has a built-in fragment component or you can use shorthand syntax <> </>
7. File Naming
There is one drawback when naming your component index, and that’s the fact that it’s kind of confusing when working with tabs in your IDE.
Solution: You can do is give your component file a regular name then use the index file to export it. It will keep your imports nice and concise while also providing a readable file name for the IDE, but it’s your choice.
8. Huge Bundle
One of the biggest problem with complex app though is that they’re big and if they are big it will have a slow initial page load because the client will download the JS bundle.
Solution: React has a feature to support lazy loading which is still experimental today but allows you to use dynamic imports on React component. Once a component is dynamically imported, you can then wrap it in the suspense component to show a fallback UI when it’s loading.
9. Messy Events
Another area where your react code can get pretty messy is with event handlers in jsx. What happens is you might have a function that takes the event as its first argument but one or more other values as secondary arguments. That means to call it you’ll need a break out an arrow function and this can get pretty messy.
Solution: A cool little JS trick here is to create a curried function.
Basically it’s just a function that returns another function. The outer function takes our custom arguments while the inner function handle the event that’s passed by default. This eliminates the need to define an arrow function for each event.
Not only does that make your code look a lot cleaner but it also gives you a legitimate use case for currying which will impress your friends and family.
10. Coupled State
When working with the state hook in a component it’s tempting to put all of your data in a single object. It makes the code look cleaner and may also seem more performant. Because you only need to call setState once. However what you should know is that React 18 will do automatic batching whenever you update the state. That means calling setState multiple times in a the same function will not trigger multiple re-renders. therefore it’s not a big deal for performance but more importantly it makes your code difficult to extract into custom hooks.
Solution: extract your logic into a custom hook.
And with that we’ve looked at a small preview of the different things you can screw up in react.
If you liked this article, you might want to clap for it because it would help me out a lot. Thank you!
