What are React Hooks and how do they work?

What are React Hooks and how do they work?

React Hooks are functions that let you use state and other React features without writing a class. They allow you to manage state and lifecycle methods in functional components.

Can you give me an example of a custom hook?

Sure! Here's a simple custom hook that manages a counter:

import { useState } from 'react';

function useCounter(initialValue = 0) {
    const [count, setCount] = useState(initialValue);
    const increment = () => setCount(count + 1);
    const decrement = () => setCount(count - 1);
    return { count, increment, decrement };
}

How do I use this custom hook in a component?

You can use the custom hook like this:

import React from 'react';
import useCounter from './useCounter';

function CounterComponent() {
    const { count, increment, decrement } = useCounter(0);
    return (
        <div>
            <h1>{count}</h1>
            <button onClick={increment}>Increment</button>
            <button onClick={decrement}>Decrement</button>
        </div>
    );
}

What are the rules for using hooks?

The main rules for using hooks are: 1) Only call hooks at the top level of your React function, and 2) Only call hooks from React functions (not regular JavaScript functions).