Mastering React Hooks: 7 Most Important Hooks in React

React hooks revolutionized functional components by providing a way to manage state, side effects, and more in a concise and reusable manner. Unlike class components, hooks allow developers to leverage powerful features like useState for managing state and useEffect for handling side effects directly within functional components. This paradigm shift has streamlined React development, making it more modular and expressive. Here is a list of 7 most important hooks ordered based on their common usage and significance:

Let's go through examples for each of React hook:

  • useState: This example demonstrates the use of the useState hook to manage state in a functional component. It creates a simple counter that increments when a button is clicked. The useState hook returns the current state (count) and a function (setCount) to update it.
import React, { useState } from 'react';

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

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

export default Counter;


  • useEffect: This code illustrates the use of the useEffect hook to fetch data from an API after the component mounts. The useEffect hook takes a function that contains the side effect (in this case, a data fetch), and it runs after the initial render. The fetched data is stored in the component's state using useState.
import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    // Fetch data from an API
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(result => setData(result))
      .catch(error => console.error('Error fetching data:', error));
  }, []); // Empty dependency array means this effect runs once after the initial render

  return (
    <div>
      {data ? (
        <p>Data: {data}</p>
      ) : (
        <p>Loading data...</p>
      )}
    </div>
  );
};

export default DataFetcher;


  • useContext: Here, the useContext hook is employed to access a theme value from a context. The ThemeContext is created with React.createContext and provides the current theme value to the ThemedComponent. This allows components to consume the theme without prop drilling.
import React, { useContext } from 'react';

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

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

  return <p>Current Theme: {theme}</p>;
};

export default ThemedComponent;
  • useReducer: This example uses the useReducer hook to manage state in a more complex scenario. It defines a simple counter with an increment action. The useReducer hook returns the current state (state) and a dispatch function to trigger state transitions based on actions.
import React, { useReducer } from 'react';

const initialState = { count: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    default:
      return state;
  }
};

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

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

export default CounterWithReducer;


  • useCallback: The useCallback hook is demonstrated in a memoized button component. It prevents unnecessary re-renders by memoizing the click handler. The onClick function is memoized with useCallback so that it only changes when the dependencies (onClick and label) change.
import React, { useState, useCallback } from 'react';

const MemoizedButton = ({ onClick, label }) => {
  const memoizedClick = useCallback(() => {
    onClick(label);
  }, [onClick, label]);

  return <button onClick={memoizedClick}>{label}</button>;
};

export default MemoizedButton;


  • useMemo: This code showcases the useMemo hook to memoize the result of an expensive calculation. The calculation is only executed when the dependencies (a and b) change. This can be useful for optimizing performance when dealing with computationally expensive operations.
import React, { useMemo } from 'react';

const ExpensiveCalculation = ({ a, b }) => {
  const result = useMemo(() => {
    // Expensive calculation
    console.log('Calculating result...');
    return a * b;
  }, [a, b]);

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

export default ExpensiveCalculation;


  • useRef: The useRef hook is used to create a reference to an input element. The inputRef is then attached to the input element, allowing for programmatic manipulation. In this case, the useEffect hook is used to focus on the input element once the component has mounted.
import React, { useRef, useEffect } from 'react';

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

  useEffect(() => {
    // Focus on the input element after the component mounts
    inputRef.current.focus();
  }, []);

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

export default InputWithFocus;




In a nutshell, React hooks make building websites cooler and easier for any aspiring React developer. If you want to make your website awesome, I'm here to help! As a seasoned React developer, I can build a website that looks great, works well, and does exactly what you need. Let's team up and make your online dream a reality!

Posted in Website Development
•
20 Nov 2023

Categories

Archives