useState Hook

useState is a React Hook that adds state to functional components.

Syntax

REACT

1
2
3
4
5
6
7
8
9
10

import { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);
    return (
        <button onClick={() => setCount(count + 1)}>
            Count: {count}
        </button>
    );
}

useState Hook

REACT

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

import { useState } from "react";

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

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>
                Increment
            </button>
            <button onClick={() => setCount(count - 1)}>
                Decrement
            </button>
        </div>
    );
}

Try It Yourself

Practice

1

Exercise

Practice this concept.

Answer

Write the code as shown above.

Quick Quiz

1

What did you learn?

Concept A

Concept B

Concept C

Concept D

This covers the basics.

Retry Quiz

Interview Questions

Explain this concept.

It is a fundamental React feature.

Next Lesson

useEffect Hook