How do I use hooks in React?

Hooks are functions that let you “hook into” React state and lifecycle features from function components. They were introduced in React 16.8 to enable the use of state and other React features without writing a class. Here's how to use some of the most common hooks:

useState: lets you add local state to function components.

    
        import React, { useState } from 'react';        
        function Example() {
            // Declare a new state variable, which we'll call "count"
            const [count, setCount] = useState(0);

            return (
                

                    
You clicked {count} times
                     setCount(count + 1)}>
                        Click me
                    
                
            );
        }
    

useEffect : lets you perform side effects in function components.

    
        import React, { useState, useEffect } from 'react';
        function Example() {
            const [count, setCount] = useState(0);

            // Similar to componentDidMount and componentDidUpdate:
            useEffect(() => {
                // Update the document title using the browser API
                document.title = `You clicked ${count} times`;
            }, [count]); // Only re-run the effect if count changes

            return (
                

                    
You clicked {count} times
                     setCount(count + 1)}>
                        Click me
                    
                
            );
        }
    

useContext: lets you subscribe to React context without introducing nesting.

    
        import React, { useContext } from 'react';
        import { ThemeContext } from './theme-context';

        function ThemedButton() {
            const theme = useContext(ThemeContext);
            return (
                
                    I am styled by theme context!
                
            );
        }
    

useReducer : is an alternative to useState that's preferable for complex state logic.

    
        import React, { useReducer } from 'react';

        const initialState = {count: 0};

        function reducer(state, action) {
            switch (action.type) {
                case 'increment':
                    return {count: state.count + 1};
                case 'decrement':
                    return {count: state.count - 1};
                default:
                    throw new Error();
            }
        }

        function Counter() {
            const [state, dispatch] = useReducer(reducer, initialState);

            return (
                <>
                    Count: {state.count}
                     dispatch({type: 'decrement'})}>-
                     dispatch({type: 'increment'})}>+
                
            );
        }
    

• useCallback & useMemo
• * useCallback returns a memoized callback.
• useMemo returns a memoized value.

These hooks are used to optimize performance by preventing unnecessary renders or computations.

• Custom Hooks : Custom hooks are JavaScript functions whose name starts with ”use” and that may call other hooks. They enable you to reuse stateful logic between components.
• It's important to follow the Rules of Hooks:
• * Only call Hooks at the top level. Don't call Hooks inside loops, conditions, or nested functions.
* Only call Hooks from React function components or custom Hooks.

This is just a surface-level introduction. Hooks offer a vast array of possibilities and can significantly simplify your components and application logic.