This website uses cookies to enhance the user experience

Managing State in React with Hooks

Share:

Web DevelopmentReact

Hi,
I’m working on a React project and I’m struggling to manage state effectively. Can someone explain how to use React Hooks, specifically useState and useEffect, to manage state in a functional component? Examples would be great!

Emily Parker

9 months ago

1 Response

Hide Responses

William Turner

9 months ago

Hi,
To manage state in React using Hooks:

  1. useState: For managing local component state.
import React, { useState } from 'react';

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

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>Click me</button>
        </div>
    );
}
  1. useEffect: For side effects such as data fetching or subscriptions.
import React, { useState, useEffect } from 'react';

function DataFetcher() {
    const [data, setData] = useState([]);

    useEffect(() => {
        fetch('https://api.example.com/data')
            .then(response => response.json())
            .then(data => setData(data));
    }, []); // Empty array means this effect runs once

    return (
        <div>
            {data.map(item => (
                <p key={item.id}>{item.name}</p>
            ))}
        </div>
    );
}
  1. Custom Hooks: Create custom hooks for reusable stateful logic.
import { useState, useEffect } from 'react';

function useFetch(url) {
    const [data, setData] = useState(null);

    useEffect(() => {
        fetch(url)
            .then(response => response.json())
            .then(data => setData(data));
    }, [url]);

    return data;
}

function DataComponent() {
    const data = useFetch('https://api.example.com/data');

    return (
        <div>
            {data && data.map(item => (
                <p key={item.id}>{item.name}</p>
            ))}
        </div>
    );
}

These hooks help manage state and side effects efficiently in React.

0