React.js Dependency Array (Managing State, Buttons to Change Emotions, Tracking Changes with useEffect
We're using React's useState and useEffect to manage and track two different emotional states in our component — a primary emotion and a secondary emotion.
1. Managing State
We'll define two separate state variables:
-
emotion(primary) -
secondary(secondary emotion, like background feelings)
const [emotion, setEmotion] = useState("fatigue");
const [secondary, setSecondary] = useState("tired");
You can feel multiple emotions at once, like being both exhausted and grateful — so we model that with dual state.
2. Buttons to Change Emotions
We add buttons to update each state using the corresponding setter functions.
<button onClick={() => setEmotion("sad")}>Sad</button>
<button onClick={() => setEmotion("excited")}>Excited</button>
<button onClick={() => setSecondary("grateful")}>Grateful</button>
3. Tracking Changes with useEffect
Now we want to react to changes in these states. This is where useEffect comes in.
-
The first
useEffectwatches changes inemotion. -
The second
useEffectwatches changes insecondary.
useEffect(() => {
console.log(`It's ${emotion} right now`);
}, [emotion]);
useEffect(() => {
console.log(`It's ${secondary} around here!`);
}, [secondary]);
🔁 If you don’t pass a dependency array, the effect runs on every render.
🧠 If you pass an empty array (
[]), it runs only once — on initial mount.🧠 If you pass
[emotion, secondary], it will run every time either of those values changes.
✅ Final Cleaned-Up App.js
import React, { useState, useEffect } from "react";
function App() {
const [emotion, setEmotion] = useState("fatigue");
const [secondary, setSecondary] = useState("tired");
useEffect(() => {
console.log(`It's ${emotion} right now`);
}, [emotion]);
useEffect(() => {
console.log(`It's ${secondary} around here!`);
}, [secondary]);
return (
<div className="App">
<h1>Current emotion is {emotion}</h1>
<button onClick={() => setEmotion("sad")}>Sad</button>
<button onClick={() => setEmotion("excited")}>Excited</button>
<h2>Current secondary emotion is {secondary}.</h2>
<button onClick={() => setSecondary("grateful")}>Grateful</button>
</div>
);
}
export default App;
✨ Optional: Track Both in One useEffect
If you want to log something when either emotion changes:
useEffect(() => {
console.log(`Emotion: ${emotion}, Secondary: ${secondary}`);
}, [emotion, secondary]);
Additionally, we have our useEffect and useState functions for tracking various variables. We will refer to this as secondary and setSecondary, which denotes emotion. After that, we will say useState, and our starting state will be fatigue. It's really easy to feel both exhausted and delighted at once. I am constantly. Thus, we're going to add another button in this instance. This transformation will be brought about by that. SetEmotion, then. Now let's place one next to the other door. Let's say h2. The secondary emotion at the moment is secondary. We'll say "Grateful" immediately. Thus, we will now include a onClick.
Recall that setSecondary should cause this modification to occur. And we'll start that off right now. We'll say "set secondary" and introduce a new feeling: gratitude. Perfect. So, this ought to function now. While this is an excellent way to deal with various emotions, we also want to apply our useEffect in this situation. I promise that I'm getting to the point, which is to make sure that we monitor these feelings and that, when necessary, we bring about these emotional shifts. Check this out, then.Now, this will call that everytime that emotion changes, if we were to say secondary in this context. It's important to remember that you have the option to pass multiple of these into the dependency array. If you so desired, you could pass more than one of these state variables. Thus, we would like to invoke this function whenever the primary emotion and the secondary emotion changed. Alright, we can pull it off. We may say happy, sad, or appreciative, and if I say grateful, we'll see both of these genuinely rendered.
—----------
App.js
const [secondary, setsecondary]=useState("tired");
useEffect(()=>{
console.log(`It's ${emotion} right now`);
}, [emotion]);
return (
<div className="App">
<h1>Currunt emotion is {emotion}</h1>
<button onClick={()=>setEmotion("sad")}>
sad
</button>
<button onClick={()=>setEmotion("excited")}
>
Excited
</button>
<h2>
Current secondary emotion is {secondary}.
</h2>
<button onClick={()=> setsecondary("grateful")}>Grateful</button>
</div>
App.js
const [secondary, setsecondary]=useState("tired");
useEffect(()=>{
console.log(`It's ${emotion} right now`);
}, [emotion]);
useEffect(()=>{
console.log(`it's ${secondary} around here!`);
}, [secondary]);
Comments
Post a Comment