React Data Flow — Understanding State and Props

What is the VirtualDOM

What triggers a render

First, it compares the component where the state is initially changed, if not identical it will be updated. It then examines children of that component and whether their props have changed between renders (if so, those components also get an update) and so forth.

Data between Components

To Child From Parent

To Parent from Child

From Sibling to Sibling

  • For the Sibling Sending Data: In the shared parent state is created to hold the information and a function to set that state is passed down as props to the sending component.
  • For the Sibling Receiving Data: Once the shared parents’ state has been updated the parent passes down that state as props to the receiving component.

Prop Drilling

  • Parent sends props to Child
  • Child sends props to Grandchild
  • Grandchild sends props to GreatGrandChild

This can be quite tedious and annoying to refactor later, this is called props drilling.

Context

The Provider component has a value prop, any data passed in via the value prop becomes available to all of the provider’s descendants (potentially your whole application if you make the App component a child.) In the components receiving the data, you can use the Consumer component or the useContext hook to pull the data from the value prop without having to pass the data as props to intermediate components.

The Cost of Context

In Conclusion

  • Using the createTaskRunner or createDataStore features from my custom hooks library, merced-react-hooks
  • Use the useReducer hook with the useContext hook to centralize state and application logic
  • Use a library like redux to centralize state and application logic

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alex Merced Coder

Alex Merced Coder

59 Followers

Alex Merced is a Developer Advocate for Dremio and host of the Web Dev 101 and Datanation Podcasts.