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.

Answer from Yangshun Tay on Stack Overflow
🌐
GeeksforGeeks
geeksforgeeks.org β€Ί reactjs β€Ί difference-between-usestate-and-useeffect-hook-in-reactjs
Difference Between useState and useEffect Hook in ReactJS - GeeksforGeeks
July 23, 2025 - Both useState and useEffect are ... in React. useState lets you manage and update the component state while useEffect allows you to handle side effects like the data fetching, DOM manipulation and cleanup....
🌐
Medium
medium.com β€Ί @manojitdas180306 β€Ί understanding-the-differences-between-usestate-and-useeffect-in-react-5296ce78d574
Understanding the Differences Between useState and useEffect in React | by Manojit Das | Medium
July 9, 2024 - It can run after every render, ... change. In summary, useState is ideal for managing state within your components, while useEffect is perfect for handling side effects that need to occur after rendering....
🌐
Reddit
reddit.com β€Ί r/react β€Ί understanding usestate, useeffect and usecontext in plain english
r/react on Reddit: Understanding useState, useEffect and useContext in Plain English
July 25, 2023 -

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 πŸ™

Top answer
1 of 3
83

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.

2 of 3
29

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 useState and useEffect?

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.

🌐
React
react.dev β€Ί reference β€Ί react β€Ί useEffect
useEffect – React
Call useEffect at the top level of your component to declare an Effect: import { useState, useEffect } from 'react'; import { createConnection } from './chat.js'; function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useEffect(() => { const connection = createConnection(serverUrl, roomId); connection.connect(); return () => { connection.disconnect(); }; }, [serverUrl, roomId]); // ...
🌐
freeCodeCamp
freecodecamp.org β€Ί news β€Ί how-to-use-the-usestate-and-useeffect-hooks-in-your-project
React Hooks – How to Use the useState & useEffect Hooks in Your Project
October 8, 2024 - This is deemed appropriate because ... by the overarching logic within the component. The React useState Hook enables you to have state variables in functional components....
Find elsewhere
🌐
DEV Community
dev.to β€Ί enitschorn β€Ί react-s-useeffect-usestate-hooks-55fe
React's useEffect & useState hooks - DEV Community
May 12, 2021 - While I didn't find useState as complex as useEffect, there are some important characteristics to keep in mind when working with it:
🌐
DEV Community
dev.to β€Ί pawankashap β€Ί understanding-reacts-usestate-and-useeffect-hooks-39mp
React's Hooks useState and useEffect - DEV Community
July 2, 2023 - In summary, React functional components have been transformed by the introduction of useState and useEffect hooks. These hooks offer a simpler and more effective way to manage state and handle side effects, resulting in cleaner and easier-to-maintain code.
🌐
C# Corner
c-sharpcorner.com β€Ί interview-question β€Ί what-is-the-use-of-useeffect-react-hooks
What is the use of useEffect() React Hooks?
The useEffect() hook is a built-in hook in React that allows you to perform side effects in functional components.
🌐
SheCodes
shecodes.io β€Ί athena β€Ί 125174-difference-between-usestate-and-useeffect-in-react
[React] - Difference between useState and useEffect in | SheCodes
Learn about the difference between useState and useEffect hooks in React, and how they are used for state management and side effects.
🌐
LogRocket
blog.logrocket.com β€Ί home β€Ί how to use the useeffect hook in react: a complete guide
How to use the useEffect hook in React: A complete guide - LogRocket Blog
June 3, 2025 - The useState Hook is used to manage state variables within a functional component, akin to how this.state works in class components. With useState, you can declare and initialize a state variable, and the Hook provides a function to update its value. We have already delved into useEffect in detail.
🌐
Stackademic
blog.stackademic.com β€Ί understanding-the-differences-between-usestate-and-useeffect-in-react-b61cad91df3c
Understanding the Differences Between useState and useEffect in React | by Olga Green | Stackademic
September 13, 2023 - On the other hand, useEffect is a hook that enables you to perform side effects in functional components. Side effects refer to operations like data fetching, DOM manipulation, and interacting with APIs.
🌐
Medium
medium.com β€Ί @pmadaan766 β€Ί react-useeffect-vs-usestate-e3e1cb121fec
React useEffect vs useState
October 19, 2023 - Using the useState Hook, you can declare any type of state variable. The Hook can also be used multiple times in a single component. When we update a state, there can be side effects that occur in parallel with each change. Data fetch requests, direct DOM manipulations, and the use of timer functions such as setTimeout() are examples of side effects. We can use the React useEffect Hook to perform side effects in function components.
🌐
W3Schools
w3schools.com β€Ί react β€Ί react_usestate.asp
React useState Hook
To use the useState Hook, we first need to import it into our component.
🌐
Wikipedia
en.wikipedia.org β€Ί wiki β€Ί React_(software)
React (software) - Wikipedia
2 weeks ago - useState and useEffect, which are the most commonly used, are for controlling state and side effects, respectively.
🌐
assistant-ui
assistant-ui.com
assistant-ui
Open-source React toolkit for production AI chat experiences Β· Production-ready components and state management
🌐
Somidh Roy's blog
somidhroy.hashnode.dev β€Ί usestate-and-useeffect-hook-what-are-hooks-and-how-do-we-use-usestate-and-useeffect-hook
useState and useEffect hook. What are hooks and how do we use useState and useEffect hook?
January 9, 2023 - This is because the useState hook ... update function that is returned from the hook. useEffect is a hook in React that allows us to perform side effects in functional components such as, Fetching data from an API and updating the ...
🌐
React
react.dev β€Ί reference β€Ί react β€Ί hooks
Built-in React Hooks – React
useState declares a state variable that you can update directly.
🌐
Zread
zread.ai β€Ί facebook β€Ί react β€Ί 14-usestate-and-useeffect
useState and useEffect | facebook/react
February 21, 2026 - When calling the setState function (returned as the second element of useState's array), React performs these steps: ... An eager state optimization computes the new state before entering the render phase. If the new state equals the current state (using Object.is), React may skip scheduling a render entirely. ... useEffect uses a tag-based system defined in ReactHookEffectTags.js to determine when and how effects execute: