UseState() and useEffect()
why countdown example in useState() doesnt need useEffect()? but when it comes to like changing a textcolor you need both useState() and useEffect()?
5 Replies
With a counter you’re simply updating a component’s state. Changing a colour after a component is rendered is an example of manipulating the DOM after rendering, which you can do with useEffect.
If you want to manipulate the DOM, you’d also typically need the useRef hook.
oh useState() isn't considered as DOM manipulating? like changing the text from 0 to 1 and so on?
No. You’re just changing the state of a component, which triggers a re-render in React. Under the hood React is manipulating the DOM of course, but from the programmer’s perspective you’re just changing state.
oh this basically applies when it comes to just like re-rendering something?
re-rendering something like text only
@Dev_zxc When you use
useState() in React, you can store some data that you want to use later. For example, you can store a number that you want to count up or down. When you use useEffect(), you can tell React to do something when something else changes. For example, you can tell React to change the color of some text when a button is clicked.
In the countdown example, we don’t need useEffect() because we don’t need to do anything when something else changes. We just need to count up or down.
In the text color example, we need both useState() and useEffect() because we want to store the color of the text and change it when a button is clicked. We also want to tell React to change the color of the text when the color changes.