React.js: The one way and the opposite way data flow

Introduction

The one way and the opposite way data flow are two important concepts you need to understand as a react developer, also they are two interview questions that often ask.

The one way data flow

As you know in react we use state to store data in a specific component and if this component has children we pass the state from the parent component to the child component as props.
The concept of passing props is called one way data flow or uni-directional data flow because the props or data can only flow from the top to the bottom, means from the parent to the child.

The opposite way data flow

The opposite way data flow is about passing props from child to parent.

When it comes to this concept, react doesn't provide us a shorthand syntax for handling opposite data flow.
That's because we can't pass props from a child component to a parent component, but we can implement it in our selves.

The opposite way data flow implementation

Let's start by creating a simple parent component contains :

• A search state
• A handle change function
• A function to get the result of the search value from an API
• A button to call the function

function Search() {
  const [search, setSearch] = useState('')

 //handle change
  const handleChange = e => setSearch(e.target.value)

 // get the result search from server
  const getTheSearchResult = () => {
    console.log(search)
  }

  return (
    <div className="App">
    <button onClick={getTheResultSearch}>Get the result</button>
    </div>
  );
}

The search input will exist in a separate component called SearchInput.

export function SearchInput() {
  const [search, setSearch] = useState('')

  //handle change
  const handleChange = e => setSearch(e.target.value)
  return (
    <input type='text' value={search} 
           onChange={handleChange} />
  )
}

Combine the two components :

• Search : the parent
• SearchInput : the child

 <div className="App">
      <SearchInput/> <br/>
     <button onClick={getTheResultSearch}>Get the result</button>
 </div>

With tis implementation we will get nothing in the console when we click the button.
That's because when we type in the search input the search state that exists in the SearchInput component will change not the one that exists in the Search component.

Now we are stack because there is no way to pass the state exists in the child to the parent.

To handle this situation, we need to remove the state and the handleChange from the SearchInput and pass them as props from the Serach component.

Refactor the SearchInput component

export function SearchInput({search, handleChange}) {

  return (
    <input type='text' value={search} 
           onChange={handleChange} />
  )
}

Refactor the Search component

<div className="App">
      <SearchInput search={search} onChange={handleChange}/>
     <button onClick={getTheResultSearch}>Get the result</button>
    </div>

Result

Now, when we type in the search input, the value pass as props to the Search component via the handleChange.
It means that the data flows in the opposite way.

Conclusion

This is all about the one way and the opposite way data flow, I hope you enjoyed ❤️.