There’s an issue around props that developers usually face. When you get started, passing props from parents to children seems like the right thing to do. Your app is small and you can easily trace where each prop is coming from and where it’s going, but as your app grows in complexity and size, this becomes near impossible. I like to handle this problem using redux and the RTK, and this is how I go about it

What is prop drilling?

Prop drilling refers to the process of passing data from a parent component to a child component through intermediate components that don’t actually use the data themselves — ChatGPT

The code above is just one example of what prop drilling looks like, and a representation just how tedious it becomes. You have components that are simply just passing data to another nested component, leaving you wondering, where that data prop is really coming from.

Fixing prop drilling with redux and the RTK

While there’s a few ways to handle prop drilling, my go to has been redux and RTK for the past two years. It’s my preferred way to handle state management with all my react apps, and I’ve included it in my react native template.

With that said, here’s how’d you write the same code above, using redux and RTK

Because you’re using redux, the first thing you’ll have to do is setup a slice to represent your state (and store)

This slice holds the same state data as the code in our first section. Once you have that set up, you can re-write the access to data like so

Here you can see that all the prop drilling is gone, and any child component that needs the data, always has it accessible, through the useSelector RTK hook.