REACT HOOKS /// FUNCTIONAL COMPONENTS /// USESTATE /// USEEFFECT /// REACT HOOKS /// FUNCTIONAL COMPONENTS /// USESTATE /// USEEFFECT ///

React Hooks

Say goodbye to class components. Master state, side effects, and lifecycle events natively in functions.

Counter.jsx
1 / 11
123456789101112131415
🎣

Tutor:React Hooks allow functional components to hook into React state and lifecycle features. They transformed React from Class-based to Function-based.


Hook Matrix

UNLOCK NODES BY MASTERING REACT APIs.

Concept: useState

Allows functional components to hold and update local state without writing classes.

System Check

What is the correct way to update state using the useState hook setter?

Community Holo-Net

Showcase Custom Hooks

ACTIVE

Built an awesome `useFetch` or `useLocalStorage`? Share it with the crew.

Support Us

React Hooks Masterclass

Author

Pascual Vila

Senior Developer // Code Syllabus

Introduced in React 16.8, Hooks changed the paradigm. They let you use state and other React features without writing a single class component.

useState

useState is a Hook that lets you add React state to function components. It takes an initial state and returns an array containing the current state and a function to update it.

useEffect

The useEffect Hook lets you perform side effects in function components. Data fetching, setting up a subscription, and manually changing the DOM are all examples of side effects. By default, it runs both after the first render and after every update, but you can control this using a Dependency Array.

Rules of Hooks

  • Only call Hooks at the top level. Do not call Hooks inside loops, conditions, or nested functions.
  • Only call Hooks from React function components or from your own Custom Hooks.
View Deep Dive Transcript+

This section contains advanced details like `useRef` for keeping mutable variables without causing re-renders, `useMemo` for performance, and how to structure your own custom hooks for maximum code reusability.

Hooks Glossary

Hook

Functions that let you 'hook into' React state and lifecycle features from function components.

snippet.js

useState

Returns a stateful value, and a function to update it.

snippet.js

useEffect

Accepts a function that contains imperative, possibly effectful code. Controls side-effects.

snippet.js

Dependency Array

The second argument to useEffect. React compares these values to decide if the effect should re-run.

snippet.js

useRef

Returns a mutable ref object. The .current property is initialized to the passed argument. Does NOT trigger re-render.

snippet.js

Custom Hook

A JavaScript function whose name starts with 'use' and that may call other Hooks.

snippet.js