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:
useStateallows functional components to have state, likethis.statein class components.useEffectallows functional components to have lifecycle methods (such ascomponentDidMount,componentDidUpdateandcomponentWillUnmount) 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.
Answer from Yangshun Tay on Stack OverflowVideos
I am learning React/Next right now. I have been using useState, useEffect and playing with useContext. Most of the definitions online are a bit too technical for me (my reading comprehension is piss poor, one of my weaknesses when it comes to learning) and add more confusion than just me looking at the code and tinkering with it. So basically...
useState = let's you change data on the fly without a page reload
useEffect = let's you add logic/functions to useState
useContext = let's you expand your data to your entire app and have it persist, as long as page does not reload
Is this an accurate assessment?
Thanks π
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:
useStateallows functional components to have state, likethis.statein class components.useEffectallows functional components to have lifecycle methods (such ascomponentDidMount,componentDidUpdateandcomponentWillUnmount) 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.
For 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.
For 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
useStateanduseEffect?
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.
My understanding is that useState allows a component to rerender when one specific state changs. However, useEffect allows us to do exactly this plus more (since we have a whole array instead of just one variable). What am I missing here?