What problem does useState in React solve?
What is useState() in React?
How to use Set with react's useState?
Can someone please explain the difference between useState and useReducer hook like I'm 5?
Videos
Im not good in javascript and we started doing React in school.
Ive seen countless videoes on useState and read about it, but i dont get what problem its trying to solve. They all just say how to use it, not why to use it. It just seems like a variable with extra steps.
Like if i wanted to make a counter, i could:
const [count, setCount] = useState(0)
Now i have a variable, with an initial value, and which i can only update with a function (for some reason, why is that smart?).
Why wouldnt i just write:
Let count = 0
Shouldnt that suffice? I can add and subtract to that too, and i dont need a specific function to do so. When i refresh the page, both values resets regardless.
React hooks are a new way (still being developed) to access the core features of react such as state without having to use classes, in your example if you want to increment a counter directly in the handler function without specifying it directly in the onClick prop, you could do something like:
...
const [count, setCounter] = useState(0);
const [moreStuff, setMoreStuff] = useState(...);
...
const setCount = () => {
setCounter(count + 1);
setMoreStuff(...);
...
};
and onClick:
<button onClick={setCount}>
Click me
</button>
Let's quickly explain what is going on in this line:
const [count, setCounter] = useState(0);
useState(0) returns a tuple where the first parameter count is the current state of the counter and setCounter is the method that will allow us to update the counter's state. We can use the setCounter method to update the state of count anywhere - In this case we are using it inside of the setCount function where we can do more things; the idea with hooks is that we are able to keep our code more functional and avoid class based components if not desired/needed.
I wrote a complete article about hooks with multiple examples (including counters) such as this codepen, I made use of useState, useEffect, useContext, and custom hooks. I could get into more details about how hooks work on this answer but the documentation does a very good job explaining the state hook and other hooks in detail.
update: Hooks are not longer a proposal, since version 16.8 they're now available to be used, there is a section in React's site that answers some of the FAQ.
useState is one of build-in react hooks available in 0.16.7 version.
useState should be used only inside functional components. useState is the way if we need an internal state and don't need to implement more complex logic such as lifecycle methods.
const [state, setState] = useState(initialState);
Returns a stateful value, and a function to update it.
During the initial render, the returned state (state) is the same as the value passed as the first argument (initialState).
The setState function is used to update the state. It accepts a new state value and enqueues a re-render of the component.
Please note that useState hook callback for updating the state behaves differently than components this.setState. To show you the difference I prepared two examples.
class UserInfoClass extends React.Component {
state = { firstName: 'John', lastName: 'Doe' };
render() {
return <div>
<p>userInfo: {JSON.stringify(this.state)}</p>
<button onClick={() => this.setState({
firstName: 'Jason'
})}>Update name to Jason</button>
</div>;
}
}
// Please note that new object is created when setUserInfo callback is used
function UserInfoFunction() {
const [userInfo, setUserInfo] = React.useState({
firstName: 'John', lastName: 'Doe',
});
return (
<div>
<p>userInfo: {JSON.stringify(userInfo)}</p>
<button onClick={() => setUserInfo({ firstName: 'Jason' })}>Update name to Jason</button>
</div>
);
}
ReactDOM.render(
<div>
<UserInfoClass />
<UserInfoFunction />
</div>
, document.querySelector('#app'));<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<div id="app"></div>New object is created when setUserInfo callback is used. Notice we lost lastName key value. To fixed that we could pass function inside useState.
setUserInfo(prevState => ({ ...prevState, firstName: 'Jason' })
See example:
// Please note that new object is created when setUserInfo callback is used
function UserInfoFunction() {
const [userInfo, setUserInfo] = React.useState({
firstName: 'John', lastName: 'Doe',
});
return (
<div>
<p>userInfo: {JSON.stringify(userInfo)}</p>
<button onClick={() => setUserInfo(prevState => ({
...prevState, firstName: 'Jason' }))}>
Update name to Jason
</button>
</div>
);
}
ReactDOM.render(
<UserInfoFunction />
, document.querySelector('#app'));<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<div id="app"></div>Unlike the setState method found in class components, useState does not automatically merge update objects. You can replicate this behavior by combining the function updater form with object spread syntax:
setState(prevState => { // Object.assign would also work return {...prevState, ...updatedValues}; });
For more about useState see official documentation.
A Set is by definition mutable, React won't trigger a new render if you merely call const newSet = set.add(0) cause the shallow comparison between previous and new will always assert to true
You can use the spread operator to change references between each update yet still maintaining all of Set's behaviors
Adding an element
const [state, setState] = useState(new Set())
const addFoo = foo =>{
setState(previousState => new Set([...previousState, foo]))
}
You could still use the add method since it returns the updated set
const addFoo = foo =>{
setState(prev => new Set(prev.add(foo)))
}
Removing an element
Removing is a little trickier. You first need to turn it into an array, filter and spread the result
const removeFoo = foo =>{
setState(prev => new Set([...prev].filter(x => x !== foo)))
}
For clarity
const removeFoo = foo =>{
setState(prev =>{
return prev.filter(x => x !== foo)
})
}
Alternatively you can also make use of the delete methods as follows:
const removeFoo = foo =>{
setState(prev => {
prev.delete(foo);
return new Set(prev);
})
}
You have to create a new set, otherwise react won't know that it needs to rerender. Something like the below will work.
setTags(tags => new Set(tags).add(tag))