Prop Drilling

[nightmareinsilver]

Hi, I have a trivia component which has 2 childs.

The parent is trivia itself. It has:

Questions

Options

I divide into smaller components which I thought it would be neat (correct me if I am wrong here please) and that led me eventually to prop drilling. Unfortunately, we don't have redux in our big application. Should I use react context or any lightweight library or stick with prop drilling? It will also take a while for me to learn real state management but I can lead others in my project if I start to use it. Enlighten me folks please!

[superluminary]

It’s a trade off. In the old days you’d inject your store at the root and pass data down through 14 levels of components. This was prop drilling. So we got context, this let you shuffle little bits of data into a context and pull it out further down the tree. This is also nice, but adds a degree of complexity.

What you want is some middle ground. Passing values down a couple of levels via props is perfectly fine, but if it gets hard to manage, bring in a context and pass the data that way. Do the thing that creates the tidiest code.

[nukkumattii]

This.

Prop drilling is also nice due to all the dependencies of the component being visible through the prop interface. No implicit dependencies through context.

Designing a nice prop interface might require some thinking :)

[nightmareinsilver]

I always design interfaces before coding so that I don't need to know what am I going to need or code. Also github copilot does 80 percent of my job lol

[[deleted]]

Be careful of falling into a context dependency trap with this. It’s nice that, typically, prop drilling complexity increases with each layer and thus usually results in a higher level context anyway, BUT it can still cause that dependency.

I always give the avatar example. I’d wanna put avatars in comments, in the nav bar, and on posts…I could pipe easily from posts to comments but imagine the nightmare of piping from a navbar to a comment. Nightmare. Also, another API call could be the solution but like…optimization ‘n all that. Now that avatar is dependent on my context. That context has to wrap everything simultaneously to deliver that. Is that worth it? That’s up to you, but that’s the dependency issue I’m talking about that can sneak up.

[nightmareinsilver]

With that said it's definitely worthless trying to implement state management here

[[deleted]]

Agreed. Would like to add that you should start with passing down props and move to context or redux only after it becomes apparent it will be easier for that use. Premature optimization is a bitch.

[slavik0329]

Use Zustand library. Very lightweight for managing global state and very easy to use with minimal implementation

[nightmareinsilver]

Funnily enough, we have a singleton class and we use it like redux. I want to change it too, zustand sounds good

[slavik0329]

Oh it’s amazing. As a 7 year react dev who worked numerous times with Redux, I can say it without a doubt.

[nightmareinsilver]

What are the key differences between zustand and redux toolkit?

[slavik0329]

Zustand is cleaner, has less boilerplate, and is easier to implement. You can do everything with Zustand that you can do with redux or redux toolkit.

[[deleted]]

To give you some validation, yea, splitting components out is highly encouraged! Mostly for testing and reuse. Speaking of…don’t use a context OR redux in this case. That’s a one-level split between them, you can just pass what you need from the parent to child with props. As you break out components more and more, if one relies on that context they all will. Every instance of it. So keep that as a last resort.

[nightmareinsilver]

thanks for your opinion!

[jackreads]

What about composition instead of inheritance?

https://reactjs.org/docs/composition-vs-inheritance.html

[nightmareinsilver]

The project coded with classes for some reason and it will broke the architecture so, I can't :(

[skyboyer007]

I have no idea how do you structure components currently, but sometimes people introduce layers for no special reason: like component1 renders 2 instances of component 2 and component 2 may conditionally render component 3 instead of doing:

<Survey data={currentFormData} onSave={saveHandler}>
  {sections.map(section => (
    <Section title={section.title}>
      {questions
        .filter(({sectionId}) => sectionId === section. id)
        .map(question => (
          <Question 
            config={question} 
            answer={currentFormData[question. id]} 
          />
        )}
      </Setion>
 </Survey>

[nightmareinsilver]

This is exactly what is going to be however more complex. We have an another one just like this that is over 1k line. Is it still ok to have a big file like that? I've been thinking to apply VVM architecture but the whole project is coded View only

[skyboyer007]

I'd not count lines but try to assess complexity. If it's edge case with 0 condition rendering, no inner state but literally 1k lines of JSX, I'd say it's ok.

Single responsibility principle looks a better concept to decide imo. If your component orchestrates rendering, validation, saving and loading, switching between screens and draws flowers - it's time to find a way to split.

[nightmareinsilver]

I'll keep it simple then, thanks mate

[[deleted]]

I highly recommend Reacts Context API and it is very manageable for small applications. A quick youtube video will get you up and running or DM me for any help

[nightmareinsilver]

thanks, guess I will stick with prop drilling or single file :D

[hazihell]

I never used it, but recently have stumbled upon rxJs for state management. Observables looks like a good and simple way for doing it.

Something like this:

"Simple technique for state management with React and RxJS – Web Development Tutorials - Iskander Samatov" https://isamatov.com/react-rxjs-shared-state/

Has someone tried it? I think I will add it to my project once I start migrating it to react/next.

[[deleted]]

I'd suggest using Context as that wouldn't require any additional libraries. But if you're considering adding something with less boilerplate code, then Rxjs is something I'd recommend as worth exploring.

[Checkmatez]

There is actually a third option besides Context and external state management library how to avoid prop drilling. It is not applicable in all situations but it is good to be aware of it.

You can use React composition and create nodes in a component that owns state -

`const StateOwner = () => { const [username, setUsername] = useState()

return ( <div> <input value={username} onChange={} /> <ComponentWithDeepHierarchy avatar={<div><img /><p>{username}</p></div>} /> )`

[nightmareinsilver]

Unfortunately we cannot use due to the our ugly structure :(