Top 7 React Hooks you must know

#react #webdev #javascript #tutorial

React hooks have revolutionized the way we manage state and side effects in React functional components. With hooks, we can encapsulate reusable logic and share it across components, leading to cleaner and more modular code.
In this article, we'll explore the top 7 React hooks that every React developer should know about. Whether you're just getting started with React or looking to level up your skills, understanding these hooks will empower you to build more efficient and maintainable React applications. Let's dive in!

useState()

useState is a React Hook that lets you add a state variable to your component which returns an array with two values.

Current State
Set Function

You can pass on initial value as well like in the example:- 28 and 'Taylor'

import { useState } from 'react';

function myComponent() {
  const [age, setAge] = useState(28);
  const [name, setName] = useState('Taylor');
}

useMemo()

useMemo is a React Hook that lets you cache the result of a calculation between re-renders which prevents the unnecessary renders in your React Application.

import { useMemo } from 'react';

function TodoList({ todos, tab }) {
  const visibleTodos = useMemo(
   () => filterTodos(todos, tab),
   [todos, tab]
  );
}

useId()

useId is a React Hook for generating unique IDs that can be passed to accessibility attributes,
Accessibility attributes let you specify that two tags are related to each other where you can use useId() generated id instead of hardcoding them.

import { useId } from 'react';

function PasswordField() {
  const passwordHintId = useId();

  return (
   <>
    <input type="password" aria-describedby={passwordHintId />
    <p id={passwordHintId}>
   </>
  )

useCallback()

useCallback is a React Hook that lets you cache a function definition between re-renders.
useCallback cache a function and useMemo cache a value/result of a calculation

import { useCallback } fom 'react';

export default function ProductPage({ productId, referrer, theme }) {
  const handleSubmit = useCallback((orderDetails) => {
   post('/product/' + productId + '/buy' {
    referrer,
    orderDetails,
    });
   }, [productId, referrer]);

useEffect()

useEffect is a React Hook that lets you perform side-effects in the component. Side effects basically is an action which connects the component to the outside world.

useEffect(() => {
  const connection = createConnection(serverUrl, roomId);
  connection.connect();
  return () => {
   connection.disconnect();
  };
 }, [serverUrl, roomId]);
}

useRef()

useRef is a React Hook that lets you reference a value that's not needed for rendering.
Basically its like useState but the only difference is useRef doesn't cause a re-render when the value changes.

import { useRef } from 'react';

function MyComponent() {
  const intervalRef = useRef(0);
  const inputRef = useRef(null);
}

useContext()

useContext is a React Hook that lets you read and subscribe to context from your component just like a data store (Redux)
useContext hook mets you to read the data stored in a context which is a data store
This example is just to demonstrate useContext hook not creating a Context

import { useContext } from 'react';

function MyComponent() {
  const theme = useContext(ThemeContext);
}

React hooks are a game-changer for React developers, offering a straightforward way to manage state and side effects in functional components. By mastering the top 7 hooks discussed here, you'll be better equipped to build efficient and maintainable React applications. Keep exploring and leveraging the power of hooks to enhance your React development journey.
Happy coding!🚀

💡 Let’s Connect!
📩 Email me at: getintouchwithvishnu@gmail.com
☕ Support my work: Buy me a Coffee