React Hook: A Guide To Beginners

React Hooks were introduced in React 16.8 to allow functional components to manage state and side effects. They provide a way to use stateful logic without writing a class component. Here are some commonly used hooks with examples and explanations:

1. useState

The useState hook allows functional components to manage local state.

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>
  );
};

export default Counter;

• useState returns an array with two elements: the current state value (count) and a function (setCount) to update it.
• setCount can take a new value or a function that receives the current state and returns a new state.

2. useEffect

The useEffect hook allows functional components to perform side effects.

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

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

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

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

export default ExampleComponent;

• useEffect accepts a function that contains the code for the side effect.
• The second argument is an array of dependencies. If any of the dependencies change, the effect will be re-run.

3. useContext

The useContext hook allows functional components to consume context.

import React, { useContext } from 'react';

const MyComponent = () => {
  const value = useContext(MyContext);

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

• useContext takes a context object and returns the current context value.

4. useReducer

The useReducer hook is a more powerful alternative to useState.

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}
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </>
  );
}

• useReducer takes a reducer function and an initial state. It returns the current state and a dispatch function to update it.

5. useMemo and useCallback

These hooks are used for performance optimization.

import React, { useMemo, useCallback } from 'react';

const MemoizedComponent = ({ items }) => {
  const total = useMemo(() => items.reduce((acc, item) => acc + item, 0), [items]);

  const handleClick = useCallback(() => {
    console.log('Button clicked!');
  }, []);

  return (
    <div>
      <p>Total: {total}</p>
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
};

These hooks help prevent unnecessary re-rendering of components.

These are some of the commonly used hooks in React. They enable functional components to manage state, perform side effects, and interact with context and reducers. Understanding and utilizing hooks effectively can lead to cleaner and more maintainable React code.