Most Senior React Devs Don’t Know How To Fix This
Hello everyone. Welcome to #SundayTechMusings. Today, I will write about a really important aspect of React that will broaden your understanding of React Mount and the key property. Last week, while working on a project, I encountered a significant issue in React. The problem was small, but I couldn’t figure out how to fix it, and it was quite frustrating. However, after investigating the issue and trying different approaches, I discovered an incredible solution.
What was the issue?
Here is some simple code to illustrate the problem.
Imagine we have an app with an Input component that holds a state value for the input type. When we click a button, the input type will toggle between “name” and “email.”
Here’s the code for the Input component:
Take a look at the above code and try to identify what’s wrong. As you can see, there are no mistakes in these simple components.
Let’s demonstrate the problem with a GIF.
As you can see, when we click the button to change the type, although the Input component changes, the input value remains the same. This is not the behavior we desire.
So, why does React act like that?
The reason is that in the code, we have the same Input component in the same place. When we change the type, React still considers it as the same component, which is true to some extent.
React renders the component, but it doesn’t remount it. React does this to avoid unnecessary remounting. We need to inform React that it’s a different component.
What are the solutions?
As mentioned above, we need to remount this component and notify React that it’s an entirely different component.
The first solution is to change the order and placement of the components.
Now, if you review the updated code above, you’ll notice that we have div and main wrappers. Therefore, React will recognize them as different components and remount them. The problem is resolved.
Cool, right? However, we had to introduce additional HTML elements, which is not an ideal solution. It could potentially break styles, and it adds unnecessary complexity to the code.
The second solution is amazing: adding a key prop to the Input component. I can already hear some of you saying, “What the heck?” 😄
By simply adding a key prop to the Input component, we tell React that it’s a new and distinct component. We are all familiar with adding keys to list elements, right? In a similar way, by assigning keys to these components, React can efficiently identify and manage their state.
In some cases, components may be conditionally rendered or created dynamically. By providing a key to these components, you can help React differentiate between different instances of the same component and optimize re-rendering. This can be particularly useful when you want to preserve the state of specific components across re-renders.
That’s all from me for this week. For more advanced JavaScript and React articles, feel free to follow me. :)
If you find this content helpful and would like to show your support, you can buy me a beer🍺😊
Buy Beer🍺
