Top 5 React Hooks

By Atul Rai | Last Updated: May 25, 2023 Previous       Next

React hooks were introduced in version 16.8 to manage the state of React applications. Hooks provide a more elegant and concise way to reuse logic across components, making code more modular, readable, and maintainable. This article will explore the top five React Hooks that can greatly simplify your development process.

1. useState

useState is a hook used for managing state in functional components. It allows you to declare a state variable and provides a function to update its value. The useState hook returns an array with two elements: the current state value and a function to update the state.

import React, { useState } from 'react';

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

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

2. useEffect

useEffect is a hook used for performing side effects in functional components. It allows you to perform tasks such as data fetching, subscriptions, or manually updating the DOM after rendering. The useEffect hook takes a function as its first argument and an optional array of dependencies as its second argument.

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

function Example() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Perform data fetching or any other side effect
    fetchData().then((result) => setData(result));
  }, []); // Empty dependency array, so it runs only once

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

Posts you may like:

1. How to consume REST APIs in React using Axios
2. How to call a REST API in React

3. useContext

useContext is a hook used for accessing the value of a React context in functional components. It allows you to consume context without wrapping your component in a context consumer. The useContext hook takes a context object as its argument and returns its current value.

import React, { useContext } from 'react';

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

function ThemeComponent() {
  const theme = useContext(ThemeContext);

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

4. useRef

useRef is a hook used for creating a mutable ref object that persists across component renders. It allows you to keep a reference to a DOM element or any other value without triggering a re-render when its value changes. The useRef hook returns a mutable ref object with a .current property.

import React, { useRef } from 'react';

function InputComponent() {
  const inputRef = useRef();

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

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleButtonClick}>Focus Input</button>
    </div>
  );
}

5. useCallback

useCallback is a hook used for memorizing a function. It returns a memorized version of the callback function that only changes if one of the dependencies has changed. It is useful for optimizing performance by preventing unnecessary re-rendering of child components.

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

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

  const increment = useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, []); // Empty dependency array, so it doesn't change

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

References

1. React- Getting Started
2. React- Introducing Hooks
3. Setup a React Development Environment and Getting Started