The React approach can be quite complicated, and you might encounter unexpected behavior or even subtle bugs. Getting rid of such bugs can be quite hard if you’re not familiar with their cause.
A particular bug arises when you conditionally render the same component with different properties. Explore this bug in detail and find out how to use React keys to solve it.
React Components Aren’t Always Independent
Its straightforward syntax is one of the main reasons you should learn React. But, despite many advantages, the framework is not without bugs.
The bug you’ll learn about here occurs when you’re conditionally rendering the same component, but passing it different props.
In cases like this, React will assume that the two components are the same, so it will not bother to render the second component. As a result, any state you define in the first component will persist between renders.
To demonstrate, take this example. First, you have the following Counter component:
import { useState, useEffect } from "react"
export function Counter({name}) {
const [count, setCount] = useState(0)
return(
<div>
<div>{name}</div>
<button onClick={() => setCount(c => c - 1)}> - </button>
<br />
<button onClick={() => setCount(c => c + 1)}> + </button>
</div>
)
}This Counter component accepts a name from the parent via object destructuring, which is a way to use props in React. Then it renders the name in a <div>. It also returns two buttons: one to decrement the count in state and the other to increment it.
Keep in mind that there is nothing wrong with the above code. The bug comes from the following code block (the App component), which uses the counter:
import { useState } from "react"
import { Counter } from "./Counter"
export default function App() {
const [isKingsley, setIsKingsley] = useState(true)
return(
<div>
{ isKingsley ? <Counter name="Kingsley" /> : <Counter name="Sally" /> }
<br />
<button onClick={() => setIsKingsley(k => !k)}> Swap </button>
</div>
)
}By default, the above code renders the counter named Kingsley. If you increment the counter to five and click the Swap button, it’ll render the second counter named Sally.
But the problem is that the counter will not reset to its default state of zero after you’ve swapped them.
This bug occurs because both states render the same elements in the same order. React doesn’t know that the “Kingsley” counter is different from the “Sally” counter. The only difference is in the name prop but, unfortunately, React doesn’t use that to differentiate elements.
You can get around this problem in two ways. The first is by changing up your DOM and making the two trees different. This requires that you understand what the DOM is. For example, you can wrap the first counter inside a <div> element and the second one inside a <section> element:
import { useState } from "react"
import { Counter } from "./Counter"
export default function App() {
const [isKingsley, setIsKingsley] = useState(true)
return (
<div>
{ isKingsley ?
(<div>
<Counter name="Kingsley" />
</div>)
:
(<section>
<Counter name="Sally" />
</section>)
}
<br />
<button onClick={() => setIsKingsley(k => !k)}> Swap </button>
</div>
)
}If you increment the “Kingsley” counter and click Swap, the state resets to 0. Again, this happens because the structure of the two DOM trees is different.
When the isKingsley variable is true, the structure will be div > div > Counter (a div containing a div, containing a Counter). When you swap the counter state using the button, the structure becomes div > section > Counter. Because of this discrepancy, React will automatically render a fresh Counter with a reset state.
You may not always want to alter the structure of your markup like this. The second way of resolving this bug avoids the need for different markup.
Using Keys to Render a Fresh Component
Keys allow React to differentiate between elements during the render process. So if you have two elements that are exactly the same, and you want to signal to React that one is different from the other, you need to set a unique key attribute on each element.
Add a key to each counter, like this:
import { useState } from "react"
import { Counter } from "./Counter"
export default function App() {
const [isKingsley, setIsKingsley] = useState(true)
return(
<div>
{ isKingsley ?
<Counter key="Kingsley" name="Kingsley" /> :
<Counter key="Sally" name="Sally" />
}
<br />
<button onClick={() => setIsKingsley(k => !k)}> Swap </button>
</div>
)
}Now, when you increment the “Kingsley” counter and click Swap, React renders a fresh counter and resets the state to zero.
You should also use keys when you render an array of items of the same type, since React won’t know the difference between each item.
export default function App() {
const names = ["Kingsley", "John", "Ahmed"]
return(
<div>
{ names.map((name, index) => {
return <Counter key={index} name={name} />
})}
</div>
)
}When you assign keys, React will associate a separate counter with each item. That way, it can reflect any changes you make to the array.
Another Advanced Key Use Case
You can also use keys to associate an element with another element. For example, you might want to associate an input element with different elements depending on the value of a state variable.
To demonstrate, tweak the App component:
import { useState } from "react"
export default function App() {
const [isKingsley, setIsKingsley] = useState(true)
return(
<div>
{ isKingsley ? <div>Kingsley's Score</div> : <div>Sally's score</div> }
<input key={ isKingsley? "Kingsley" : "Sally" } type="number"/>
<br />
<button onClick={() => setIsKingsley(k => !k)}> Swap </button>
</div>
)
}Now, every time you swap between the <div> elements for Kingsley and Sally, you’re automatically changing your input’s key attribute between “Kingsley” and “Sally”. This will force React to completely re-render the input element with each click of the button.
More Tips for Optimizing React Applications
Code optimization is key to creating a pleasant user experience in your web or mobile app. Knowing about different optimization techniques can help you get the most out of your React applications.
The best part is that you can apply most of these optimization techniques with React Native applications too.
FAQ
Q: What Is React Native?
React Native extends React to provide a framework for developing cross-platform apps. It can drastically reduce overall development time.
Q: Should I Always Ensure My Components Are 100% Isolated?
React’s component system helps to encapsulate data, but you’ll sometimes need to bypass it. Lifting state is one approach, but it can lead to prop drilling, which has drawbacks.
Q: How Can I Use Props to Create a Flexible Component?
You can follow the steps to create a sample React notification component that uses props for customization.