There are several built-in hooks, including useState, useEffect, useContext, useReducer, useCallback, useMemo, useRef, and more. Here's a brief explanation of some commonly used hooks:
1.useState()
import { useState } from 'react';function MyComponent() {const [age, setAge] = useState (28) ;const [name, setName] = useState ('Taylor');//......}
useState is a React Hook that lets you add a state variable to your component which returns an array with exactly two values
1. Current State
2. Set Function
You can pass an initial value as well like in the example:- 28 and 'Taylor'
Read : How to use and implement useState()
2.useRef()
import { UseRe } from 'react';function MyComponent () {const intervalRef = UseRef(0) ;const inputRef = UseRef (null);//....}
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 .
Read : How to use and implement useRef()
3.useMemo()
import { useMemo } from 'react';function TodoList({ todos, tab }) {const visibleTodos = UseMemo (() => filterTodos (todos, tab),[todos, tab]);}
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 .
Read : How to use and implement useMemo()
4.useEffect()
useEffect(() => { const connection = createConnection(serverUrl, roomId); connection.connect();
return () => { connection.disconnect(); }; }, [serverUrl, roomId]);
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 .
Read : How to use and implement useEffect()
5.useCallback()
import { useCallback } from 'react';
const ProductPage = ({ productId, referrer, theme }) => { const handleSubmit = useCallback((orderDetails) => { // Assuming post is a function that sends a POST request // Replace with actual implementation or import from a library post(`/product/${productId}/buy`, { referrer, orderDetails, }); }, [productId, referrer]);
return ( // Your component JSX goes here // ... );};
export default ProductPage;
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
Read : How to use and implement useCallback()
6.useContext()
import React, { useContext } from 'react';import ThemeContext from './ThemeContext'; // Assuming ThemeContext is imported from a file
function MyComponent() { const theme = useContext(ThemeContext);
// Use the theme in your component logic
return ( // Your component JSX goes here // ... );}
export default MyComponent;
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
Read : How to use and implement useContext()