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 ❤️.
Top comments (7)
I think this will be a perfect case to use
ContextAPI to share state between parent and children componentscontext API is not a good solution here it is an over kill because if we use the SearchInput in many components we need many shared global states.
Yes, if you only need to pass state change one or two levels or with very few children, pass setState as prop will be fine.
But, if you need to manage complex state, use Context API with useReduer hook in the container component will be easier to maintain and scale. Or use other state management lib like redux
i agree
Thanks Ridha,I didn't know that passing data from parent to child has that specific name.
Welcome Victo Hugo 😊
Bruh **thank you **for this article ,it made so easy to rewise the things i have done before without giving much thoughts