A key benefit of React is its unidirectional information stream. This makes the stream of information predictable, and helps keep away from sudden unwanted effects from information altering unexpectedly.
However what precisely does “unidirectional information stream” imply in React? Let’s break it down:
The Knowledge Flows Down
In React, guardian elements cross information to youngsters through props:
// Mum or dad
perform Mum or dad() {
const [value, setValue] = useState('Hi there');
return <Little one worth={worth} />;
}
// Little one
perform Little one({worth}) {
return <h1>{worth}</h1>;
}
The guardian’s worth
state is handed down into the Little one
through a prop. That is the “information down” half.
Occasions Stream Up
When some information wants to alter, occasions hearth and bubble up:
// Little one
perform Little one({worth, onUpdate}) {
return (
<button onClick={() => onUpdate('World')}>
Replace Worth
</button>
);
}
// Mum or dad
perform Mum or dad() {
const [value, setValue] = useState('Hi there');
const handleUpdate = (newValue) => {
setValue(newValue);
}
return <Little one worth={worth} onUpdate={handleUpdate} />;
}
The onUpdate
callback propagates the occasion as much as the guardian. That is the “occasions up” half.
Advantages of Unidirectional Stream
This sample gives a number of advantages:
- Predictable – Just one manner information may be modified
- Modular – Every part solely worries about its personal state
- Straightforward to purpose about – Keep away from cascading updates throughout a number of elements
Unidirectional stream enforces good React structure.
Bidirectional Stream Risks
Different frameworks use two-way binding. This results in cascading updates which are arduous to hint:
A -> B -> C
B updates
C updates
A updates from C
B updates once more
React’s top-down stream retains information altering in a single place solely.
Abstract
- React makes use of unidirectional information stream
- Mum or dad elements cross information down through props
- Little one elements propagate occasions up
- This stream prevents cascading updates throughout elements
Studying to construction apps to comply with unidirectional information stream takes observe, however results in extra maintainable code.