From Heist Strategy to React State: How data flows between components
When I started coding, I mainly tried to catch up with syntaxis, but I needed to think about design and data flow when my projects grew. Just start coding something that is not working anymore. To make this problem more specific, let’s discuss how React components can pass data between them. Let’s have some fun and imagine our React App as a group of experienced thieves from Ocean’s Eleven (I hope you are old enough to remember this movie with young Brad Pitt and George Cloney). The main character, Danny Ocean, a recently paroled thief, assembles a team of eleven skilled criminals to pull off an elaborate heist. Their target: robbing three of Las Vegas's most protected casinos—Bellagio, Mirage, and MGMGrand—simultaneously, all owned by the ruthless Terry Benedict. The team faces twists, close calls, and clever maneuvers to pull off one of the most daring heists in cinematic history. So, let’s imagine that React components are criminals who need to communicate secretly. PS: I didn’t have time to watch this movie again, so I made up some examples instead of trying to find exact matches in the plot. PS2: Ok. I finished watching half of the movie because it is so good. Let's begin 1. Sharing Data Using Callbacks In React, callbacks are a common way to share data between components, specifically from a child to its parent component. This pattern allows data to flow upward in the component hierarchy. So, Rusty (Brad Pitt) goes to the race to find a retired con man, Saul Bloom and hands him a note with an invitation to participate in a heist. Saul decided to go after receiving a note. // Danny (Parent Component) const SaulBloom = () => { const [secretMessage, setSecretMessage] = useState(""); // Callback to handle the message from Rusty const handleRustyMessage = (message) => { setSecretMessage(message); }; return ( SaulBloom Secret Message: {secretMessage} ); }; // Rusty (Child Component) const Rusty = ({ sendToDanny }) => { const sendSignal = () => { sendToSaul("All clear, move to the vault!"); // Sending secret signal }; return ( Rusty: Sending Signal Send Secret Message ); }; 2. Sharing Data Using State However, what if information needs to be provided by all crew members? Let’s say the plan of the heist strategy is the shared state. The parent component (like Danny Ocean) manages the plan; all crew members need access to this information. Maybe they are using some paroled Google doc where Danny posted the plan, and members read it or updated it. In React, the state is used to share and manage data within and between components. When the state is lifted to a common parent component, it can act as a single source of truth for its child components, enabling easy data sharing. function CrewMeeting() { const [plan, setPlan] = useState('Rob Bellagio at 11 PM'); const updatePlan = () => { setPlan('Rob Bellagio and MGM Grand at 10 PM'); }; return (
When I started coding, I mainly tried to catch up with syntaxis, but I needed to think about design and data flow when my projects grew. Just start coding something that is not working anymore.
To make this problem more specific, let’s discuss how React components can pass data between them. Let’s have some fun and imagine our React App as a group of experienced thieves from Ocean’s Eleven (I hope you are old enough to remember this movie with young Brad Pitt and George Cloney). The main character, Danny Ocean, a recently paroled thief, assembles a team of eleven skilled criminals to pull off an elaborate heist. Their target: robbing three of Las Vegas's most protected casinos—Bellagio, Mirage, and MGMGrand—simultaneously, all owned by the ruthless Terry Benedict. The team faces twists, close calls, and clever maneuvers to pull off one of the most daring heists in cinematic history. So, let’s imagine that React components are criminals who need to communicate secretly.
PS: I didn’t have time to watch this movie again, so I made up some examples instead of trying to find exact matches in the plot.
PS2: Ok. I finished watching half of the movie because it is so good.
Let's begin
1. Sharing Data Using Callbacks
In React, callbacks are a common way to share data between components, specifically from a child to its parent component. This pattern allows data to flow upward in the component hierarchy.
So, Rusty (Brad Pitt) goes to the race to find a retired con man, Saul Bloom and hands him a note with an invitation to participate in a heist. Saul decided to go after receiving a note.
// Danny (Parent Component)
const SaulBloom = () => {
const [secretMessage, setSecretMessage] = useState("");
// Callback to handle the message from Rusty
const handleRustyMessage = (message) => {
setSecretMessage(message);
};
return (
SaulBloom Secret Message: {secretMessage}
// Rusty (Child Component)
const Rusty = ({ sendToDanny }) => {
const sendSignal = () => {
sendToSaul("All clear, move to the vault!"); // Sending secret signal
};
return (
Rusty: Sending Signal
);
};
2. Sharing Data Using State
However, what if information needs to be provided by all crew members? Let’s say the plan of the heist strategy is the shared state. The parent component (like Danny Ocean) manages the plan; all crew members need access to this information. Maybe they are using some paroled Google doc where Danny posted the plan, and members read it or updated it.
In React, the state is used to share and manage data within and between components. When the state is lifted to a common parent component, it can act as a single source of truth for its child components, enabling easy data sharing.
function CrewMeeting() {
const [plan, setPlan] = useState('Rob Bellagio at 11 PM');
const updatePlan = () => {
setPlan('Rob Bellagio and MGM Grand at 10 PM');
};
return (
