React State idea explanation

Question

Can someone explain React State with Hooks? How the State works in real world example? Where is the whole idea about it? I understand that it holds data, but in which scenarious the State must be changed?
I usually had to work with States where I add an object there and from it take data, but I am struggling to totally understand how it will help in other cases when other developers use it every day. Any answers much appreciated!

Answer 1

In a react functional component, a state, data is intialized from an object in parameter of useState.
eg.
const [data, setData] = useState({count: 0});

This state can be populated to the return jsx code with
eg.
return (
<div>Count: {data.count}</div>
)

This state also can be updated by defined update function (from useState), setData,
eg.
return (
<div>Count: {data.count}</div>
<button onClick={() => setData(d => {...d, count: d.count+1})>Increase count</button>
)

Answer 2

Wow, I should have known this in my previous react exercises.

thanks.

Answer 3

Why in the return of setData, it has ...d?

Answer 4

Gordon well, we normally use setData({count: data+1});
It's better to use setData( prevState => {count: prevState.count + 1});

for a state contains multi properties
eg useState( {
count: 0,
run: true
})

I would use
setData( prevState => {...prevState, count: prevState.count + 1});

Answer 5

LL1 for a real life website, react from front-end browser/app needs to post data update to server (back-end), server script eg. Node.js would receive the response from react (front-end), and then save the received data onto database eg. MongoDB (data persistent)

Answer 6

Calviղ Great answer! In addition to this answer, maybe you can explain with example, what happens in application/website in terms of State? Like in your example with count, you use setData to update the count on button click - what happens to the updated count, where it's being used after? Now, if I set the count with onclick, it changes, but after page reload it resets, how to change change the data, how this part works? I think this is the main part that I need to understand in order to fully get on my way with this...

Answer 7

LL1 React is front end javascript, it cannot retain any data, all data reset to initial values upon page reload.

Answer 8

Calviղ Ok, yes, but how to save the data that changes? How to make this work like in real life website?

Answer 9

Calviղ Thank you for the explanation! Should a frontend React developer know Node.js? And not just only how to change data in states till page refresh?

Answer 10

LL1 It depends, some developers use react to build static website, which do not require persist data on server.