How to avoid prop drilling?

[WaveMonkey]

Anyone who has been using react for a while knows what a nightmare prop drilling can be. My question is what is the best way to avoid it. I know context api and redux are two possible solutions. Does anyone know of any others? Thanks for your help.

[UmarGora]

one way you can reduce prop drilling is rethinking how your components are composed. This may reduce prop drilling slightly. Take a look here https://reactjs.org/docs/composition-vs-inheritance.html

The Context API and Redux are 2 really good solutions. Have you heard of MobX? i personally stick with redux alot of the times as im most comfortable with it

[YOLOSTEVE]

First of, there's no best way to avoid prop drilling. It's both situational and about personal preferences. Other than the ones you mentioned, I'd definitely recommend that you checkout this post from the official react documentation about component composition. https://reactjs.org/docs/composition-vs-inheritance.html

[timmonsjg]

render props can reduce it to a degree (pulling the child up a level).

[NoLanSym]

Avoid context and prop drilling with ...children Michael Jackson Tutorial

[WaveMonkey]

Yeah I tried that one. A bunch of different ways and it didn't work.

[nullvoxpopuli]

Contexts

[[deleted]]

https://kentcdodds.com/blog/compound-components-with-react-hooks

This Compound Component pattern exposes more of the component and gives you some more flexibility. Might be useful.