Essential React Hooks

useState:

useState allows you to add state to functional components.
It returns an array with two elements: the current state value and a function to update it.

Example:

import React, { useState } from "react";

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

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

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

useEffect:

useEffect allows you to perform side effects in functional components.
It replaces componentDidMount, componentDidUpdate, and componentWillUnmount.

Example:

import React, { useState, useEffect } from "react";

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

  useEffect(() => {
    fetchData().then((result) => {
      setData(result);
    });
  }, []);

  return <div>{data}</div>;
};

useContext:

useContext allows you to access the nearest context's value.
It replaces the need for context consumers.

Example:

import React, { useContext } from "react";

const ThemeContext = React.createContext("light");

const ThemeConsumer = () => {
  const theme = useContext(ThemeContext);

  return <div>Current theme: {theme}</div>;
};

useReducer:

useReducer is an alternative to useState when state logic is complex.
It allows you to manage state with a reducer function, similar to Redux.

Example:

import React, { useReducer } from "react";

const initialState = { count: 0 };

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

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

  const increment = () => {
    dispatch({ type: "increment" });
  };

  const decrement = () => {
    dispatch({ type: "decrement" });
  };

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

useRef:

useRef allows you to persist a value across renders without triggering a re-render.
It can be used to access the DOM or store mutable values.

Example:

import React, { useRef } from "react";

const InputWithFocus = () => {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
};

useMemo:

useMemo allows you to memoize expensive calculations and avoid unnecessary re-computations.
It takes a function and a dependencies array and returns the memoized value.

Example:

import React, { useMemo } from "react";

const ExpensiveCalculation = ({ a, b }) => {
  const result = useMemo(() => {
    // Perform expensive calculation using a and b
    return a * b;
  }, [a, b]);

  return <div>Result: {result}</div>;
};

useCallback:

useCallback allows you to memoize functions and prevent unnecessary re-renders.
It takes a function and a dependencies array and returns the memoized function.

Example:

import React, { useCallback } from "react";

const MemoizedButton = ({ onClick }) => {
  const memoizedOnClick = useCallback(() => {
    // Do something when the button is clicked
    onClick();
  }, [onClick]);

  return <button onClick={memoizedOnClick}>Click me</button>;
};

useLayoutEffect:

useLayoutEffect is similar to useEffect but fires synchronously after all DOM mutations.
It can be used when you need to read or manipulate the DOM immediately after the component has updated.

Example:

import React, { useLayoutEffect } from "react";

const LogWindowDimensions = () => {
  useLayoutEffect(() => {
    const handleResize = () => {
      // Log window dimensions
      console.log(window.innerWidth, window.innerHeight);
    };

    window.addEventListener("resize", handleResize);
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  return <div>Check the console for window dimensions</div>;
};

useImperativeHandle:

useImperativeHandle allows you to customize the instance value that is exposed to parent components when using ref forwarding.
It is typically used in conjunction with forwardRef.

Example:

import React, { useImperativeHandle, forwardRef } from "react";

const CustomInput = forwardRef((props, ref) => {
  const inputRef = useRef(null);

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
    // More custom methods...
  }));

  return <input ref={inputRef} />;
});

// Usage in a parent component:
const ParentComponent = () => {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <CustomInput ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
};

useDebugValue:

useDebugValue is a custom hook that can be used to display a label for custom hooks in React DevTools.

It can be helpful for debugging and inspecting custom hooks.

Example:

import { useDebugValue } from "react";

const useCustomHook = () => {
  // Custom hook logic...

  useDebugValue("Custom Hook Label");
};

useErrorBoundary:

useErrorBoundary is a hook for creating error boundaries within functional components.

It allows you to catch and handle errors within a component tree.

Example:

import React, { useErrorBoundary } from "react";

const ErrorBoundaryComponent = ({ children }) => {
  const [error, resetErrorBoundary] = useErrorBoundary();

  if (error) {
    // Render an error component or fallback UI
    return (
      <div>
        <p>An error occurred.</p>
        <button onClick={resetErrorBoundary}>Try again</button>
      </div>
    );
  }

  return children;
};

useTransition:

useTransition is a hook for managing and coordinating transitions and animations.

It allows you to batch multiple state updates and defer rendering updates until after a certain time.

Example:

import React, { useState, useTransition } from "react";

const AnimatedText = () => {
  const [text, setText] = useState("");
  const [startTransition, isPending] = useTransition();

  const handleClick = () => {
    startTransition(() => {
      setText("New text");
    });
  };

  return (
    <div>
      {isPending ? "Loading..." : text}
      <button onClick={handleClick}>Load Text</button>
    </div>
  );
};

useDeferredValue:

- useDeferredValue is a hook that allows you to defer the update of a value until after a certain time.
- It can be useful for optimizing performance in specific scenarios.
- Example:
  ```jsx
  import React, { useState, useDeferredValue } from 'react';

  const DeferredValueExample = () => {
    const [value, setValue] = useState('');

    const deferredValue = useDeferredValue(value, { timeoutMs: 1000 });

    const handleChange = (event) => {
      setValue(event.target.value);
    };

    return (
      <div>
        <input value={value} onChange={handleChange} />
        <p>Deferred Value: {deferredValue}</p>
      </div>
    );
  };
  ```

useOpaqueIdentifier:

- useOpaqueIdentifier is a hook that generates a unique identifier for a component instance.
- It can be used as a key in lists to improve rendering performance.
- Example:
  ```jsx
  import React, { useOpaqueIdentifier } from 'react';

  const ListItem = ({ item }) => {
    const id = useOpaqueIdentifier();

    return <div key={id}>{item}</div>;
  };
  ```

useTransitionEffect:

useTransitionEffect is a combination of useEffect and useTransition.

It allows you to create transitions that occur over a certain period of time.

Example:

import React, { useState, useTransitionEffect } from "react";

const FadeInOutComponent = () => {
  const [show, setShow] = useState(false);
  const [startTransition, isPending] = useTransition();

  useTransitionEffect(() => {
    if (show) {
      startTransition(() => {
        // Perform fade-in animation
      });
    } else {
      startTransition(() => {
        // Perform fade-out animation
      });
    }
  }, [show]);

  const handleClick = () => {
    setShow((prevShow) => !prevShow);
  };

  return (
    <div>
      {isPending ? "Animating..." : show ? "Visible" : "Hidden"}
      <button onClick={handleClick}>Toggle Visibility</button>
    </div>
  );
};