Built-in React Hooks

In React, built-in Hooks are like tools that empower your components with various functionalities. They give you the flexibility to use different features without having to create class components. You can either utilize the hooks provided by React or mix and match them to create custom hooks tailored to your needs. Here’s a list of all the pre-built hooks available in React.

State Hooks

State in React allows a component to keep track of information such as user input or the current state of the component. For instance, imagine a form where you type in your name. State would remember what you typed. Similarly, in an image gallery, state would remember which image you selected to display. It’s like a memory bank for your component to hold onto important data.

When using state in a component add one of these state.

• useState enables components to manage and update their own state without using classes.
• useReducer is used to manage complex state logic through a reducer function.

const Counter () =>{
     cosnt [count, steCount] = useState('0');
    //....
}

Context Hooks

Context in React acts as a global store for sharing data between components, allowing distant components to access this data without the need for prop drilling, thereby simplifying state management and making it more efficient.

• useContext it is used to consume data from a Context in a functional component.

const Theme ()=>{
   const themeDark = useContext(ThemeContext);
   //....
}

Refs Hooks

React refs store non-rendering data like DOM node references or timeout IDs, without triggering re-renders. They enable interaction with non-React systems, like browser APIs, aiding integration with external libraries and imperative logic. Serving as an “escape hatch” from React’s standard data flow, refs offer flexibility and enhance compatibility with diverse environments.

• useRef is used to create mutable references that persist across renders in functional components.
• useImperativeHandler customizes the instance value that is exposed when using ref with functional components.

const App () =>{
   const myRef = useRef(null);    
   const handleClick = () => {     
       myRef.current.focus(); 
   };
}

Effect Hooks:

Effects in React allow components to interact with and stay synchronized with external systems, such as handling network requests, manipulating the browser’s DOM, managing animations, integrating with widgets from other UI libraries, and working with non-React code. Essentially, effects help components communicate and coordinate with the world outside of React.

• useEffect is used to connect component to an external system.

const ClassRoom ()=>{
    useEffect(() => {  
      // Effect code here
    return () => {    
      //Here clean up code  }; 
     }, [dependencies]);
}

There are two different useEffect approach that are rarely used.

• useLayoutEffect performs a side effect immediately after the browser has painted the screen.
• useInsertionEffect is used before ReactJS makes changes to the DOM, and in this libraries can insert the dynamic CSS.

Performance Hooks:

To make your React app run faster, a smart strategy is to avoid doing unnecessary tasks. For instance, you can instruct React to reuse previous calculations that are already saved, or to avoid redoing a render if the data hasn’t changed since the last time. This helps your app be more efficient and responsive.

Used this to skip calculation and unnecessary re-rendirng, one of these are.

• useMemo is used to memoize the result of a function computation, preventing unnecessary recalculations.
• useCallback used to memoize functions, preventing unnecessary re-renders in child components.

const TodoFucntion ()=>{
    const seeTodos = useMemo(() => 
    filterTodos(todos, tab), [todos, tab]);
    //...
}

• useTransition is used to manage transitions of UI elements, improving user experience during asynchronous updates.
• useDeferredValue is used to delay the update of a value until certain conditions are met, enhancing performance by deferring non-critical updates.

Resource Hooks:

Components in React can access resources without storing them as part of their state. For instance, a component can retrieve a message from a Promise or obtain styling information from a context without needing to manage that data internally. This approach simplifies component logic and promotes more efficient resource utilization.

If you read a value from a resource the use this hook.

• use is used when you read a value from resource like from Promises or context.

const  ChatComponent({ chatPromise }) => {
    const chat = use(chatPromise);
    const themeDark = use(ThemeContext);
  // ...
}

Other Hooks

• useUndoState Hook
• useId Hook
• useDebugValue Hook
• useParams Hook
• useSelect Hook
• useImperativeHandle Hook

Example : Below is an example of built-in React Hooks.

Javascript

import React, { useState }
    from 'react';
import ThemeContext
    from './ThemeContext';
import AnotherComponent
    from './UseCounter';
import './App.css';

const App = () => {
    const [theme, setTheme] = useState('white');

    return (
        <ThemeContext.Provider value={theme}>
            <div className={`theme-container
            ${theme === 'white' ?
                    'white-theme' : 'black-theme'}`}>
                <button onClick={() =>
                    setTheme(theme === 'white'
                        ? 'black' : 'white')}>
                    Toggle Theme
                </button>
                <UseCounter />
            </div>
        </ThemeContext.Provider>
    );
};

export default App;

Javascript

import React, { createContext } from 'react';

const ThemeContext = createContext();

export default ThemeContext;

Javascript

import React, {
    useEffect,
    useContext,
    useReducer,
    useRef,
    useCallback
}
    from 'react';

// Context for managing theme
const ThemeContext = React.createContext();

// Reducer function for managing counter state
const counterReducer = (state, action) => {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 };
        case 'decrement':
            return { count: state.count - 1 };
        default:
            throw new Error();
    }
};

const UseCounter = () => {
    // useState to manage counter state
    const [state, dispatch] =
        useReducer(counterReducer, { count: 0 });

    // useEffect to log whenever counter changes
    useEffect(() => {
        console.log('Counter value changed:',
            state.count);
    }, [state.count]);

    // useContext to get theme
    const theme = useContext(ThemeContext);

    // useRef to access and focus on the input element
    const inputRef = useRef(null);

    // useCallback to memoize the increment function
    const increment = useCallback(() => {
        dispatch({ type: 'increment' });
        inputRef.current.focus();
    }, [dispatch]);

    return (
        <div style={{ color: theme }}>
            Counter: {state.count}
            <button onClick={increment}>
                Increment
            </button>
            <button onClick={() =>
                dispatch({ type: 'decrement' })}>
                Decrement
            </button>
            <input ref={inputRef} type="text" />
        </div>
    );
};

export default UseCounter;

Output:

Output