How can Components updated each other that are on different branches

user_16475217 0
Viewed 81

I want to update the Diagram component if I click on the Button. I have the following structure:

               +------+                          
               -Layout|--\                       
             -/+------+   |                      
           -/             \                      
    +-----/---+       +----|----+                
    | Sidebar |       | Content |                
    +--|------+       +----|----+                
      /                     \                    
  +---|---+             +---|----+               
  |Button |             |Diagram |               
  +-------+             +--------+

If I press the Button, the Diagram should update. My only idea how I can do this is the following:

  1. I define a changeDiagram() function in the Layout component.
    • the changeDiagram function changes the variable named type to the value 'barChart'
  2. I pass the changeDiagram as a parameter to sidebar. If i click on the button the changeDiagram function gets excecuted.
  3. I pass the type variable that is in the Layout component as a parameter to the Content component.
  4. The Content component renders the new Diagram

The problem is that I don't want to define a function that is only responsible for the Diagram inside the Layout Component. Also every Component between Layout and Diagram gets rendered, which is not necessary.

How to solve this problem? I heard of react-redux. Do I have to use this or are there other solutions?

react-redux react-hooks reactjs javascript
2 Answers

The answer to this question is deeply linked to the very inner nature of React:

  • A React project uses modular units called Components.
  • Components are nestable and reusable, and once you start composing them you will end up with a Components Tree as you showed in your picture.
  • This Tree is handled by react in a Virtual DOM before it renders it to the real DOM.
  • React uses what it's called React State, to start reconciliation and diffing algorithms to understand when and what it has to re-render certain branches of the Components Tree.

With this premise, you understand that if you want your Button to trigger a rerender of Diagram, you need Button to change a React State held in Layout ( which is the lower common Parent ) or in a Component that is a Parent to Layout. This is why React re-renders with a top-down flow, so for example, a State change in Sidebar, will re-render only Sidebar and Button and not Layout.

  • There are different possible approaches to handle this and the choice depends on a lot of different factors.Usually on big applications where you have hundreds or thousands of Components and you are going to have a lot of methods that interact with a same state, using Redux is the best approach, since it's one of the most robust, tested and solid global state managers out there. It solves your issues since with Redux you will have global actions that change your global state, so you don't have to worry about where those functions are declared or how to pass them to your nested children, since you can dispatch those actions from anywhere in your application, and you can retrieve the state in the same way without the need to drill it with props from Parent to Child through your application.
  • React offers a tool to have state and handlers available in your components without having to prop drill them through your Components, and it's context. Context is useful for libraries or for small applications where Redux or other state managers would just add unnecessary deps to the project. A context change will trigger the rerender of all the tree in any case down to your child, you can avoid intermediate rerenders by using React.memo() wrapper.
    You can check this example.

How to solve this problem? I heard of react-redux. Do I have to use this or are there other solutions?

So, this is up to you, if you plan to have a lot of these scenarios yes, you probably need a state manager, Redux, Recoil, Valtio, Zustand there are many of them. What fits better your case depends from many factors just try them and see which one you like more.

user_134789930

The only solution without redux (or context API) is there

If you want to only render needed component you'll have to use redux and its store. OR you'll have to use Context API

user_102615860
Related