23.CustomHooks.md

Custom Hooks in React: A Game Changer for Your Components

Are you tired of writing repetitive code for your React components? Do you want to make your codebase more organized and easy to understand? Look no further than the magic of Custom Hooks!

Custom Hooks in React simplify code organization and maintenance by allowing the reuse of stateful logic and behavior. They also serve as an alternative to HOCs and Render Props for simpler and more readable code.

//Custom Hook
import { useState } from 'react';

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

  function increment() {
    setCount(count + 1);
  }

  function decrement() {
    setCount(count - 1);
  }

  return { count, increment, decrement };
}

export default useCounter;

This custom hook can be used in a component like this:

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

function Counter() {
  const { count, increment, decrement } = useCounter();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default Counter;

In this example, the component Counter is using the custom hook useCounter to manage its internal state of count and its increment and decrement functions. It also use the state in its JSX to render the count on the screen, and using the increment and decrement functions to update the `state`` when the respective buttons are clicked.

Here are some tips and rules for creating custom hooks:

• Follow use naming convention for custom hooks.
• Only call custom hook at top level of component.
• Do not use inside loops or conditions.
• Make hook reusable by using props passed as arguments.
• Test and document the custom hook with usage instructions.