Hooks

What is a Hook
Hooks let you use different React features from your components. You can either use the built-in Hooks or
combine them to build your own

Allow functions to have access to state and other React features without using classes

● Hooks can only be called inside React function components.

● Hooks can only be called at the top level of a component.
● Hooks cannot be conditional
State Hooks

State lets a component “remember” information like user input. For example, a form component can use state to
store the input value, while an image gallery component can use state to store the selected image index.

To add state to a component, use one of these Hooks:

● useState declares a state variable that you can update directly.

● useReducer declares a state variable with the update logic inside a reducer function.
The React useState Hook allows us to track state in a function component.

State generally refers to data or properties that need to be tracking in an application.

useState accepts an initial state and returns two values:

● The current state.

● A function that updates the state.

import { useState } from "react";

function FavoriteColor () {

const [color, setColor ] = useState ("red");

The first value, color, is our current state.

The second value, setColor , is the function that is used to update our state.

Lastly, we set the initial state to "red": useState("red")

Read state
import { useState } from 'react';

import { createRoot } from 'react-dom/client' ;

function FavoriteColor () {

const [color, setColor ] = useState ("red");

return <h1>My favorite color is {color}!</h1>

createRoot (document .getElementById ('root')).render(

<FavoriteColor />

);
To update our state, we use our state updater function.

<button

type="button"

onClick={() => setColor("blue")}

>Blue</button>
Update state
Context Hooks

Context lets a component receive information from distant parents without passing it as props. For example, your
app’s top-level component can pass the current UI theme to all components below, no matter how deep.

● useContext reads and subscribes to a context.

function Button() {

const theme = useContext(ThemeContext);

// ...
Ref Hooks
Refs let a component hold some information that isn’t used for rendering, like a DOM node or a timeout ID. Unlike with state,
updating a ref does not re-render your component. Refs are an “escape hatch” from the React paradigm. They are useful when
you need to work with non-React systems, such as the built-in browser APIs.

● useRef declares a ref. You can hold any value in it, but most often it’s used to hold a DOM node.
● useImperativeHandle lets you customize the ref exposed by your component. This is rarely used.

function Form() {

const inputRef = useRef(null);

// ...
Effect Hooks
Effects let a component connect to and synchronize with external systems. This includes dealing with network, browser DOM,
animations, widgets written using a different UI library, and other non-React code.

● useEffect connects a component to an external system.

function ChatRoom({ roomId }) {

useEffect(() => {

const connection = createConnection(roomId);

connection.connect();

return () => connection.disconnect();

}, [roomId]);

// ...

Effects are an “escape hatch” from the React paradigm. Don’t use Effects to orchestrate the data flow of your application. If
you’re not interacting with an external system, you might not need an Effect.
There are two rarely used variations of useEffect with differences in timing:

● useLayoutEffect fires before the browser repaints the screen. You can measure layout here.
● useInsertionEffect fires before React makes changes to the DOM. Libraries can insert dynamic CSS here.
Performance Hooks
A common way to optimize re-rendering performance is to skip unnecessary work. For example, you can tell React to reuse a
cached calculation or to skip a re-render if the data has not changed since the previous render.

To skip calculations and unnecessary re-rendering, use one of these Hooks:

● useMemo lets you cache the result of an expensive calculation.

● useCallback lets you cache a function definition before passing it down to an optimized component.

function TodoList({ todos, tab, theme }) {

const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);

// ...

}
Sometimes, you can’t skip re-rendering because the screen actually needs to update. In that case, you can
improve performance by separating blocking updates that must be synchronous (like typing into an input) from
non-blocking updates which don’t need to block the user interface (like updating a chart).

To prioritize rendering, use one of these Hooks:

● useTransition lets you mark a state transition as non-blocking and allow other updates to interrupt it.
● useDeferredValue lets you defer updating a non-critical part of the UI and let other parts update first.