This content originally appeared on Level Up Coding - Medium and was authored by Shuaib Khan
Ever curious if you’re actually using the tools in the right manner?
Let’s say you are using a hammer, You’re free to decide if you grab the hammer by the end or closer to the head. However, while the hammer makers (if that’s even a thing) won’t specify it, there is a right way and a wrong way to use their tools. Same goes with React.
Just because you’re able to use create-react-app to bootstrap your React application it doesn’t mean you’re doing it the right way.
In this article, We will see different ways in which you should not use React.
1. Having large component trees inside the same component
When i was a beginner I normally begin by creating one big giant component, because I normally do not know how I desire my code to be arranged initially, and I do not want to waste my time over organizing things.
this leads to an anti-pattern of having one overly large, deeply-nested component. With a component like that, It’s hard to understand refactoring and testing. Something like this:
Yuck right? It’s very hard to decipher what’s going on here. We have several areas for improvement:
- Refactor long conditional statements into separate variables.
- Separate pieces of the tree into smaller presentational components.
- Move the arrow function handlers out of the component tree.
Let’s apply these and see what the component looks like now:
This component tree looks a lot better.
The rule of thumb: Keep component trees clean so that it’s easier to see what the component is supposed to be rendering and when.
2. Use Context for Global Scope
In some circumstances, the line between state and context might end up being blurry. However, you would do well to keep in mind that they are two very different things, meant for different use cases.
Context allows you to share props between related components, helping you avoid the dreaded “prop drill down” effect, where you have to pass the same prop through 4 different levels just to get to the actual component that needs it.
Global state, on the other hand, is meant to handle values that are common to the entire application.
If you wish to use context in this circumstance, you’d need to develop a context provider to wrap your entire application in, which would go against the entire purpose of said constructs.
I recommend using Redux to store the global state and use Context API for specific parts of your application within a well-defined bounded context.
3. Rendering .map() key with a variable index
From a beginner to experienced Developer, We’ve all been there, having to render a list of things and quickly relying on the handy syntax shown below:
Noticed, how we are using the index variable provided by the map method. We need to provide a key to our elements, so we might as well use this one right?
WRONG!!
Mostly because you’re hardly ever rendering such a simple list. In fact, you’re usually rendering a list of things that might change, And what happens then? The value of key is used by React as a unique identifier of the element to understand when an element is added, changed or removed.
While you might think that in our example the index used actually acts as an ID, consider what would happen if we were to add more elements to the list of users but not at the end. Instead the new index values would reference different users thus a different component (a different li element). React would get really confused and generate unexpected behaviors. You can read more about why this is a big problem in this article.
But remember: take the time to generate a unique ID for all your elements, it’ll save you a lot of headaches.
4. Nested Components
When writing components sometimes we might be tempted to nest them like this:
It makes sense after all since the child component is not going to be used outside of MainComponent and it can currently use the name state variable without having to receive it as a prop. However, this nesting of functions actually creates a small performance issue.
You see, every time your MainComponent component is called (i.e rendered), it’ll re-create the childComponent component’s definition. So it’ll keep on declaring the same function over and over again on every execution. Mind you, if you’re not doing this everywhere, it might be a small issue that you might not even notice affecting your performance. However, left unchecked, this is a terrible practice.
Better to create child components separately.
Conclusion
Although React might allow us to solve the problem in the various ways, avoid these anti-patterns so that you can do a high-performance apps all the time.
Sometimes, these anti-patterns may start like a snowball, accumulating into an avalanche of problems later.
4 Anti-Patterns to avoid in React was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Shuaib Khan
Shuaib Khan | Sciencx (2022-10-03T17:06:02+00:00) 4 Anti-Patterns to avoid in React. Retrieved from https://www.scien.cx/2022/10/03/4-anti-patterns-to-avoid-in-react/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.