reactjs
/

React useState Hook

Last Sync: Today

On this page

9
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

reactjs

React useState Hook

What is useState?

useState is a React Hook that allows you to add state to functional components.

Basic Syntax

JavaScriptRead-only
1
const [state, setState] = useState(initialValue);

Example

JavaScriptRead-only
1
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

Updating State

JavaScriptRead-only
1
setCount(prev => prev + 1);

Multiple States

JavaScriptRead-only
1
const [name, setName] = useState('');
const [age, setAge] = useState(0);

State with Objects

JavaScriptRead-only
1
const [user, setUser] = useState({ name: '', age: 0 });

setUser({ ...user, name: 'John' });

Best Practices

  • Use functional updates when needed
  • Keep state minimal
  • Avoid direct mutation
  • Split state logically

Common Mistakes

  • Mutating state directly
  • Not using previous state when needed
  • Storing unnecessary data
  • Overusing single state object

Conclusion

useState is the most basic and powerful hook in React, enabling dynamic and interactive UI development.

Try it yourself

const [count, setCount] = useState(0);

Test Your Knowledge

Q1
of 3

useState returns?

A
Array
B
Object
C
Function
D
String
Q2
of 3

State update triggers?

A
Reload
B
Re-render
C
API call
D
Error
Q3
of 3

Correct update?

A
count++
B
setCount(count+1)
C
count=1
D
update()

Frequently Asked Questions

What is useState?

Hook for managing state.

Does it re-render?

Yes, on state update.

Can store objects?

Yes, but update immutably.

Previous

react hooks intro

Next

react use effect

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.