Why Does My Data Flow Backwards?
Components are such a powerful tool for React developers, and allow them to reuse major pieces of their apps that users will see numerous times. However, when first starting to make components, there is a very real obstacle that every developer immediately faces. It has to do with the way data is transported and made available through its instructions. Although almost every app you use, whether it be Facebook, Amazon, or really anything else you would have on your phone has figured out their own solution to this issue, that doesn’t mean developers still don’t struggle with Reverse Data Flow.
What does Reverse Data Flow even mean? Let’s say you have an object and you want to make some kind of change to it, but you’d like it to be reflected with some type of action on the page in a different container or component which ISN’T a parent component of that object. Could you simply pass ‘props’ up like you could down? This is not possible due to how Javascript is set up. Instead there is a solution I’m going to talk about and I hope it can clear some stuff up for you as it did me.
If you’d like to pass a value to a component that isn’t a parent, you’d need to first create a function to be passed down into the components props from the location of the state you’d like to affect. Then you’d need to call that function via another function inside that component, passing the object in through that function as you do it. Finally, you’d create a function in your api level component that would update its initial state and reflect the changes made in your component that passed up its new state. From here, you can now pass that data into other components that have access to the component the initial state was stored in.
Why might this be helpful? Do you ever add something to a cart and it not work? This would be an example of reverse data flow not working. If your item isn’t being appended to your cart, it may not have a reference to the item, or it may be looking for the wrong type of data. This isn’t to make the concept seem scary, far from it. It also seems like controlling the data would make it more secure as well as allows for operating from new components possible without a large reconfiguration of your app.
It might seem like a cumbersome way to shuttle data around your app, but due to the architecture of Javascript, it’s the way it’s done. One could easily see how many uses Reverse Data Flow has, just look at your phonebook, friends list, basically anything you hit submit or send on. It might seem overwhelming but it’s really just the nature of the language, and although it seems complex, it’s nowhere near as complicated as i imagine it could be.
