Most Commonly Used React Hooks in ReactJS

React hooks allow you to use state and other React features without writing class components. This makes it easier to write React components that are both concise and performant.

In this blog post, we will discuss some of the most commonly used React hooks, along with examples of how to use them.

1. useState

The useState hook is used to manage state in a React component. State is a piece of data that can be used to track the current state of a component.

import React, { useState } from 'react';

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

  const handleClick = () => {
    setCount((prev)=>prev + 1);
  };

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

export default MyComponent;

2. useEffect

The useEffect hook is used to perform side effects in a React component. Side effects are actions that are performed outside of the render method, such as making API calls or setting up event listeners.

import React, { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    // ...
    console.log("oof from useEffect")
  }, []);

  return (
    <div>
       <p>oof</p>
    </div>
  );
};

export default MyComponent;

3. useRef

The useRef hook is used to create a reference to a DOM element. This can be useful for accessing the DOM element in the render method or for performing side effects.

import React, { useRef } from 'react';

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

  const handleClick = () => {
    // Access the DOM element using the ref
    console.log(inputRef.current.value);
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={handleClick}>Log input value</button>
    </div>
  );
};

export default MyComponent;

4. useMemo

The useMemo hook is used to memoize a value. This means that the value will only be calculated once, even if the component that uses it re-renders.

import React, { useMemo } from 'react';

const MyComponent = () => {
  const expensiveCalculation = () => {
    // Perform an expensive calculation
    return Math.random();
  };

  const memoizedValue = useMemo(expensiveCalculation, []);

  return (
    <div>
      <p>Memoized value: {memoizedValue}</p>
    </div>
  );
};

export default MyComponent;

5. useCallback

The useCallback hook is used to memoize a callback function. This means that the callback function will only be created once, even if the component that uses it re-renders.

import React, { useCallback } from 'react';

const MyComponent = () => {
  const handleClick = useCallback(() => {
    // Perform some action
  }, []);

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
};

export default MyComponent;

Conclusion

These are just a few of the most commonly used React hooks. By understanding how to use these hooks, you can easily write concise and performant React components.