The Startup
Published in

The Startup

Understanding Information Flow in React: Data Down, Action Up

Photo by Samuel Wong on Unsplash

Components

A website using React components. Image source.

State v Props

State

Props

“Data down, Action up”

Data is sent down to the child from the parent component with the help of props

  1. Parent component creates a child component
  2. Parent component passes down data by referencing this.state via props
  3. Child component can render the data by referencingthis.props

Data is sent back up to the parent from the child component with the help of callback functions

  1. A user interacts with a UI element (i.e. click on a button element)
  2. An attached event listener to the UI element is triggered (i.e.onClick)
  3. An attached handler to the event listener is triggered (i.e.handleClick)
  4. A callback function inside the handler is triggered (i.e.onHandleClick)
  5. Logic of the callback function is executed within the parent component
  6. State is updated inside the parent component
  7. Data is sent back down and the DOM re-renders

Example: Incrementer App

Left: Incrementer App on a browser; Right: UI/Component tree

Data Down

  • onHandleClick={this.incrementNumber}, a callback function
  • number={this.state.number}

Action Up

  1. A user interacts with a UI element. They see “Increment Number by 1” and click on the button.
  2. The attached event listener to the UI element is triggered. You can see inside the button tag isonClick which gets triggered on a mouse click. This then triggers a function insideChildComponent called handleClick. It’s proper naming convention to start any event handler with “handle.” This way you’ll know what this function is actually doing.
Incrementer app with the updated number after DOM re-render

Information flow diagram

Diagram of the information flow of Incrementer app

--

--

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
Andy del Valle

Software Engineer and Full Stack Web Developer based in Seattle, WA