Understanding the useState Hook

The useState hook in React allows functional components to manage state. It returns a stateful value and a function to update it.

const [state, setState] = useState(initialValue);

initialValue: The initial value of the state or the default value.
state: The current value of the state.
setState: The function used to update the state.

Example: Counting with useState

import React, { useState } from 'react';

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

    const increaseCount = () => {
        setCount(count + 1);
    }

    return (
        <>
            <h1>{count}</h1>
            <button onClick={increaseCount}>Increase Count</button>
        </>
    );
}

export default Count;

Using Previous State with useState

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

    const decreaseCount = () => {
        setCount(prevCount => prevCount - 1);
    }

    return (
        <>
            <h1>{count}</h1>
            <button onClick={decreaseCount}>Decrease Count</button>
        </>
    );
}

export default Count;

Managing Complex State with useState

const State = () => {
    const [state, setState] = useState({ val: 0, hi: 'hi' });

    const incrementValue = () => {
        setState(prevState => ({ ...prevState, val: prevState.val + 1 }));
    }

    const addHi = () => {
        setState(prevState => ({ ...prevState, hi: prevState.hi + 'i' }));
    }

    return (
        <>
            <h1>{state.val} - {state.hi}</h1>
            <button onClick={incrementValue}>Increment Value</button>
            <button onClick={addHi}>Add Hi👋🏼</button>
        </>
    );
}

export default State;

Using Object Destructuring with useState

You can destructure the state object to simplify accessing its properties.

const State = () => {
    const [state, setState] = useState({ val: 0, hi: 'hi' });
    const { val, hi } = state;

    const incrementValue = () => {
        setState(prevState => ({ ...prevState, val: prevState.val + 1 }));
    }

    const addHi = () => {
        setState(prevState => ({ ...prevState, hi: prevState.hi + 'i' }));
    }

    return (
        <>
            <h1>{val} - {hi}</h1>
            <button onClick={incrementValue}>Increment Value</button>
            <button onClick={addHi}>Add Hi👋🏼</button>
        </>
    );
}

export default State;

Info

Using object destructuring with useState can simplify state management code in functional components.

Task

Practice Using the useState Hook

Objective: Create a simple counter application using the useState hook.

Create a Functional Component:

Create a functional component named Counter.

import React from 'react';

const Counter = () => {
    // Code for state and increment function will be added in subsequent steps
    return (
        <div>
            {/* Counter content will be added here */}
        </div>
    );
}

export default Counter;

Import useState Hook:

Import the useState hook from the 'react' library.
```
import React, { useState } from 'react';
```

Initialize State:

Initialize a state variable count with an initial value of 0 using useState.

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

    return (
        // Counter content
    );
}

Display Count Value:

Display the value of count inside a <h1> tag.

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

    return (
        <div>
            <h1>Count: {count}</h1>
        </div>
    );
}

Implement Increment Functionality:

Implement a function incrementCount that increments the value of count by 1 when a button is clicked.

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

    const incrementCount = () => {
        setCount(count + 1);
    }

    return (
        // Counter content
    );
}

Render Button:

Render a button with the text "Increment" that triggers the incrementCount function when clicked.

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

    const incrementCount = () => {
        setCount(count + 1);
    }

    return (
        <div>
            <h1>Count: {count}</h1>
            <button onClick={incrementCount}>Increment</button>
        </div>
    );
}

This task will help you practice using the useState hook to manage state in functional components.

BEGGINER FRIENDLY