React.js : Sharing State Between Components

If you like my articles, you can buy me a coffee or share it :)

---

In this article, we will focus on Sharing State Between Components in our react.js.

---

State is isolated and private

First of all, when we create a state in a component, we must understand how this state behaves. The state created within the component is local to the component. So what does this mean?

if you render the same component twice, each copy will have completely isolated state. Changing one of them will not affect the other. That is, updating the state of one of the same two components does not affect the other.

Let's explain with an example.

The same component was rendered twice and the button was clicked, the result is as follows.

Output :

As seen in the gif, each copy was completely isolated, and changing one of them did not affect the other.
What if you wanted both components to keep their states in sync? The right way to do it in React is to remove state from child components and add it to their closest shared parent.

---

Now in 3 steps, Let's keep the states of both components sync. Unlike props, state is completely specific to the component that declares it. To synchronize the state of two components, a shared state should be lifted to their nearest common parent and passed down to both components as props.

Step 1: Remove state from the child components

Let's transfer the isActive state to the parent component and add isActive to the Panel's prop list. Now the Panel’s parent component can control isActive by passing it down as a prop. Conversely, the Panel component now has no control over the value of isActive it’s now up to the parent component.

---

Step 2: setIsActive Prop

Let's send the function that updates the state to the child component as a prop.

---

Step 3: onClick Event

When the onClick event of the button is triggered, the setIsActive will run and the state will be updated.

Output :

---

Lifting state up often changes the nature of what you’re storing as state. So in this example it was active in two panels at the same time. If we wanted only one panel to be active at a time ? This means that the Accordion common parent component needs to keep track of which panel is the active one. Instead of a boolean value, it could use a number as the index of the active Panel for the state variable:

const [activeIndex, setActiveIndex] = useState(0);

When the activeIndex is 0, the first panel is active, and when it’s 1, it’s the second one.

Clicking the “Show” button in either Panel needs to change the active index in Accordion. A Panel can’t set the activeIndex state directly because it’s defined inside the Accordion. The Accordion component needs to explicitly allow the Panel component to change its state by passing an event handler down as a prop:

 <Panel
    isActive={activeIndex === 0}
    onShow={() => setActiveIndex(0)}
  >
    ...
  </Panel>
  <Panel
    isActive={activeIndex === 1}
    onShow={() => setActiveIndex(1)}
  >
    ...
  </Panel>

Output :

---

Conclusion

The state created within the component is local to the component. In this article, In this article, we examined how Sharing State Between Components. If you want, you can talk about Sharing State Between Components principles in the comments.