I have seen these two new concepts introduced in react v16.
As per my understanding:
useState
is similar likesetState
with hooks anduseEffect
works similarly like life cycle methods.
Is my understanding correct? If not, what’s the exact difference between useState
and useEffect
?
What does useEffect do? By using this Hook, you tell React that your component needs to do something after render. React will remember the function you passed (we'll refer to it as our “effect”), and call it later after performing the DOM updates.
The useState Hook can be used to keep track of strings, numbers, booleans, arrays, objects, and any combination of these! We could create multiple state Hooks to track individual values.
The useEffect Hook allows you to perform side effects in your components. Some examples of side effects are: fetching data, directly updating the DOM, and timers. useEffect accepts two arguments.
To put it simply, both useState
and useEffect
enhance functional components to make them do things that classes can but functional components (without hooks) cannot:
useState
allows functional components to have state, like this.state
in class components.useEffect
allows functional components to have lifecycle methods (such as componentDidMount
, componentDidUpdate
and componentWillUnmount
) in one single API.Refer to the examples below for further illustration:
useState
class CounterClass extends React.Component { constructor(props) { super(props); this.state = { count: 1 }; } render() { return <div> <p>Count: {this.state.count}</p> <button onClick={() => this.setState({ count: this.state.count + 1 })}>Increase</button> </div>; } } function CounterFunction() { const [count, setCount] = React.useState(1); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)} >Increase</button> </div> ); } ReactDOM.render( <div> <CounterClass /> <CounterFunction /> </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>
useEffect
class LifecycleClass extends React.Component { componentDidMount() { console.log('Mounted'); } componentWillUnmount() { console.log('Will unmount'); } render() { return <div>Lifecycle Class</div>; } } function LifecycleFunction() { React.useEffect(() => { console.log('Mounted'); return () => { console.log('Will unmount'); }; }, []); // Empty array means to only run once on mount. return ( <div>Lifecycle Function</div> ); } ReactDOM.render( <div> <LifecycleClass /> <LifecycleFunction /> </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>
Read more about useState and useEffect on the official React docs.
useState()
First, we have the functional component which did not supported state
, in other words, a functional component is a stateless component.
Now, with Hooks, we have the functional component but stateful. It is achieved by using useState.
useEffect()
First, with stateless functional component, we didn't have component lifecycle hooks. In other words, whenever you want to use component lifecycle hooks, you should consider using class component.
Now, we are able to use component lifecycle hooks without using class component. It is achieved by using useEffect. In other words, now whenever we want to use component lifecycle hooks, we already have two options either using class component or using Hooks with useEffect
.
UPDATE
what’s the exact difference between
useState
anduseEffect
?
In simple words, useState
allows our functional components which used to be stateless become stateful. And useEffect
allows our functional components leverage the component lifecycle hooks which were, in the past, only supported for class components.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With