Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Questions on data passing within react JS

I’m not new to react but I’m also not super experienced and I wanted to ask some opinions about the proper ways to pass around data

Now the current project we’ve been working on has redux and I’ve been told not to use it and I will admit to a point that redux has been abused put the point where even local states have been put into redox and it’s ridiculous

So those refactoring that’s going to be done for this project I’m working on in one question always comes to mind that I struggle with is how to pass data between sibling components ends if there’s any rules against how deep you can pass data down within components.

  1. So for the first one I guess the question is is if you have a component that has five sibling components, And let’s imagine that one of those components set some kind of data from like a network call how can you return that and pass it along to the sibling components? I think my first assumption would be to pass back some state or call back to the parent and then how the parent do it from there but I’m not sure if that’s the only best way.

  2. My other question concerned about passing data within components right so let’s say we have a parent sibling and I need to pass down a prop with data 5 components deep Is that an appropriate pattern or is it shamed upon? As an alternative I have seen the producer context consumer pattern that reacts has and I guess is this a case for that or is there some kind of rules of when that would be the best time to use?

  3. And just for the sake of completion, Is there any type of rules or better patterns or better practices to know when to use passing down props versus redux versus producer content consumer?

Thanks everyone

Tags:

2

Answers


  1. 0

    Here are simple answers to your questions:

    1. Yes, the best way to share data between sibling components is to lift the state up to their parent. The sibling that needs the data can call a function from the parent, and the parent can then pass the updated data down to the other sibling. This keeps everything organized.
    2. Passing props five components deep isn’t ideal because it makes the code harder to read and maintain. Using context is a good alternative for sharing data without drilling props. It allows you to access data anywhere in the component tree, so it’s great for deeply nested components.
    3. Use props for simple, direct parent-child communication. Use context for global state or when many components need the same data. Redux is best for complex state management where you have a lot of data and actions that need to be handled. Choosing the right method depends on your app’s size and complexity.
    Login or Signup to reply.
  2. 0

    Generally, there are no specific "rules" for how deep you should pass your data down to the component tree.

    However, there is a term called "prompt drilling".

    If your project has many data that should be passed from one component to other, between components and up/down of component tree. Dev community widely recommend, and medium-large size projects forces, to use a state manager.

    Tools like Redux or Zustand, which are most common, put the state or data outside of component, which make this state accessible across all component tree.

    Although your project does not require any state libraries for state/data management, because you can simply build it by yourself using useState & useContext. But I recommend to USE utils to see how things are done by far more experienced people

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search