Skip to content
Search

React

lastmod 2026-06-22created 2016-03-14194 edits

React JS is a JavaScript library created for developing the web UIs of Facebook and Instagram. Also, like Backbone.js and Angular.js, it lets you freely handle the web front end, so I also think of it as a Web Front Framework.

The biggest feature of React JS, and the reason to use it, is that you can build large-scale applications whose data changes continuously. In React, you build web UIs using Components, and only the Components whose data has changed are re-rendered to display the changed data.

Categories

Hooks

Examples

Libraries

i18n

A carousel (Carousel) is a slide image.

  • React-Slick - The documentation is clean, and it gives a typical slide feel. Since the documentation is so well organized, it has the advantage that you can see many examples
  • React-Material-Ui-Carousel - Works well with material-ui, and has the advantage of letting you change detailed settings such as the slide transition animation and arrow settings.
  • React Responsive Carousel - Provides responsive slides. This library seems to support only image carousels! I haven't been able to use this one, but I added it because its download count on npm is overwhelming.

Window

  • react-window
  • react-virtualized-auto-sizer - HOC that grows to fit all of the available space and passes the width and height values to its child.
  • react-window-infinite-loader - Helps break large data sets down into chunks that can be just-in-time loaded as they are scrolled into view. It can also be used to create infinite loading lists (e.g. Facebook or Twitter).
  • react-vtree - Lightweight and flexible solution to render large tree structures (e.g., file system).

Eject

Animation

Frameworks

UI Frameworks

Performance - Block DOM

Database

  • GoatDB - Lightweight NoDB for Deno and React

ETC

ESLint

Recommand Libraries

2022

Recommended libraries for developing apps with React as of 2022

  • Creating a React project : Vite/CRA for the client, Next.js/Remix/Gatsby for the server
  • React State management : useState/useReducer, useContext, Redux
  • React Data Fetching : React Query (REST APIs, GraphQL APIs) + axios, Apollo Client
  • Routing with React Router
  • CSS Styling in React : CSS-in-CSS, CSS-in-JS/Emotion/Stitches, Functional CSS with Tailwind CSS
  • React UI Libraries : Material UI(most popular), Mantine(recommended), Chakua UI(recommended), Ant Design, Radix, Primer, NextUI, Tailwind UI (not free), Semantic UI, React Bootstrap
  • React Animation Libraries : Framer Motion (most recommended), react-spring (often recommended), react-motion, react-move, Animated (React Native)
  • Visualization and Chart Libraries in React : Recharts, react-chartjs, nivo, visx, Victory
  • Form Libraries in React : React Hook Form + yup/zod
  • React Type Checking : Just use TypeScript
  • React Code Structure: Style and Format : ESLint + Prettier
  • React Authentication : Choose a service/BaaS such as Firebase, Auth0, or AWS Cognito
  • React Hosting : Digital Ocean if you want to manage everything yourself, otherwise Cloudflare Workers, Netlify, or Vercel (especially for Next.js); Firebase Hosting if you use Firebase
  • Testing in React : Jest + React Testing Library (most popular), Cypress
  • React and Immutable Data Structures : Immer
  • React Internationalization : FormatJS, react-i18next
  • Rich Text Editor in React : Draft.js, Slate.js, ReactQuill
  • Payments in React :PayPal, React Stripe Elements or Stripe Checkout
  • Time in React : date-fns, Day.js, Luxon
  • React Desktop Applications : Electron, Tauri, NW.js, Neutralino.js
  • Mobile Development with React : React Native, Expo
  • React VR/AR : react-three-fiber, react-360, aframe-react
  • Design Prototyping for React : Figma, Zeplin, Excalidraw, InVision
  • React Component Documentation : Storybook, Docusaurus, Docz, Styleguidist

Full-Stack React Tech Stack for 2025

Introduces technologies useful for developing a SaaS product or a minimum viable product (MVP)

  • Next.js - A React-based framework that provides many features such as routing and caching out of the box, and supports connecting to the backend through the latest React features such as server components and server functions
  • Astro - An optional tool for creating a product's landing page, used for building landing pages quickly and improving the developer experience
  • Server Components - Components that run on the server and enable things like database access; they revolutionize how full-stack React applications are developed
  • Server Functions - A feature that lets React components run server-side code with just a function call; generates API endpoints automatically
  • Server Actions - A subset of server functions; libraries exist to improve usability, but you can also implement them yourself
  • Tailwind CSS - Recommended for fast product development and long-term CSS maintenance; once you get used to it, it is hard to go back to traditional CSS
  • Shadcn UI - A UI library that integrates smoothly with Tailwind CSS; it offers a fresh approach to UI management by providing a versionless system
  • Lucide React - The icon library that comes with Shadcn UI; there is little need to replace it until another alternative appears
  • TypeScript - The industry standard for JavaScript projects; contributes to a better developer experience, fewer bugs, and better code maintainability
  • Zod - A validation library that works well with TypeScript, mainly used for server-side validation; client-side forms use native HTML validation to reduce complexity
  • nuqs - A tool for managing URL state (e.g., search, sort, pagination) type-safely in Next.js; in other frameworks you can use built-in features or other libraries
  • Zustand - An optional tool for client-side state management; used less often thanks to URL state, client-side data caching, and the evolution of server-driven React applications
  • React Query - An optional tool for complex client-side data fetching such as infinite scroll; if project complexity is low, server components alone are enough
  • Prisma (ORM) - A stable ORM choice; it could be replaced with Drizzle following the latest trend, but Prisma is preferred for now
  • Supabase (database) - A service that provides a Postgres database; for flexibility, only the database is used and connected through Prisma, making it easy to switch to another database
  • Lucia (authentication) - No longer maintained, but serves as learning material for building authentication systems with Oslo, Argon2, Arctic, etc., so you can implement a custom authentication system without depending on third-party solutions
  • S3 (file uploads) - With AWS S3, presigned URLs, and AWS IAM, you can build a flexible and inexpensive file storage solution; since most third-party services use the same API, it is easy to switch providers when needed
  • Inngest (queue) - A tool used for orchestrating complex tasks in the backend; suited to background jobs that are not time-sensitive, and provides a queue system that is easy to set up and maintain
  • React Email + Resend - The former lets you create email templates with React components, and the latter is a great solution for sending email; switching from the previously used Postmark to Resend gave satisfying results
  • Vercel (hosting) - A full-stack application hosting solution used for years; for self-hosting, Hetzner/DigitalOcean with Coolify is recommended
  • CloudFlare (domains) - After experience managing domains in various places, now happily using CloudFlare for its excellent UI and the ability to attach extra information to DNS records
  • Stripe (payment gateway) - A payment gateway used for years; provides great documentation and APIs, but can get complex as its features and API scope have expanded
  • Testing and tools - A combination of React Testing Library and Cypress/Playwright is a good choice, and ESLint (Biome in the future) and Prettier are recommended. Storybook is still used for UI documentation, and tsx is used to run TypeScript in the terminal

Essential React libraries for 2025

Introduces the essential React libraries needed to develop large-scale applications for 2025

Starting a React project

  • Vite : The most popular tool for setting up React projects. Provides fast build speed and easy TypeScript support
  • Next.js :
    • A React-based meta-framework supporting server-side rendering (SSR) and static site generation (SSG)
    • Provides many features such as file-based routing, API routes, and React Server Components (RSC)
  • TanStack Start (Beta) : A new React-based framework, with React Server Components support planned. Being developed as an alternative to Next.js
  • React Router : The leading library for client-side routing in React. Currently changing under the influence of Remix
  • Astro : A framework-agnostic static site generation tool. Can be used with React, and can optimize performance by minimizing unnecessary JavaScript
  • Nitro , Redwood , Waku
    • New frameworks and tooling for React
    • Waku is a library supporting React Server Components, made by the developer of Zustand
  • Recommended:
    • Client-side rendering (CSR): Vite
    • Server-side rendering (SSR): Next.js
    • Static site generation (SSG): Astro

React package managers

  • npm : The default Node.js package manager and the most widely used
  • Yarn : Provides better dependency management and speed improvements
  • pnpm : Excellent performance but relatively less common
  • Turborepo : A Monorepo management tool that lets you manage multiple React projects effectively
  • Recommended:
    • General package management: npm
    • When performance optimization is needed: pnpm
    • When a monorepo is needed: Turborepo

React state management

  • useState, useReducer : Built-in React hooks for managing state within a component
  • useContext : A built-in React hook for global state management
  • Zustand : A library for managing global state with a simple API. Easier to use than Redux, so many developers prefer it lately
  • Redux : A state management library used for a long time. Recently, Redux Toolkit has become the standard
  • XState, Zag : State machine-based state management libraries
  • Mobx , Jotai , Nano Stores : State management libraries usable as alternatives to Zustand and Redux
  • Recommended:
    • Local state: useState / useReducer
    • Small global state: useContext
    • Large global state: Zustand

React data fetching

  • TanStack Query : A data fetching library for REST and GraphQL API requests. Provides features such as caching, synchronization, and optimistic updates
  • Apollo Client : A data management library optimized for GraphQL APIs
  • urql : A lightweight GraphQL client
  • Relay : A high-performance GraphQL client developed by Facebook
  • RTK Query : A tool that makes data fetching easy in a Redux environment
  • tRPC : Provides TypeScript-based type-safe API communication between backend and frontend. Can be used with TanStack Query
  • Recommended:
    • Server-side data fetching: React Server Components / Functions (when using a supporting meta-framework)
    • Client-side data fetching: TanStack Query (REST, GraphQL)
    • GraphQL only: Apollo Client
    • Type-safe API communication: tRPC

React routing

  • React Router : The most widely used library for client-side routing
  • TanStack Router (Beta) : A new routing library with excellent TypeScript support
  • Recommended:
    • Server-side routing: Next.js
    • Client-side routing: React Router (most used), TanStack Router (latest trend)

CSS styling in React

  • Tailwind CSS
    • A Utility-First-CSS approach that enables fast styling with predefined classes
    • Keeps the design system consistent, but class naming can become complex
  • CSS Modules
    • Modularizes styles per component to prevent global style conflicts
    • The most widely used of the CSS-in-CSS approaches
  • styled-components
    • A CSS-in-JS approach that defines CSS within JavaScript code
    • Recently declining in popularity due to performance and server-side issues
  • Emotion : A CSS-in-JS library similar to styled-components, with performance optimization and utility class support
  • clsx : A utility library that makes conditional className setting easy
  • StyleX : A new CSS-in-JS solution developed by Facebook. Provides utility-first styling through optimized compilation
  • Other CSS libraries : PandaCSS , linaria , vanilla-extract , nanocss , UnoCSS , Styled JSX
  • Recommended:
    • Most popular approach: Tailwind CSS
    • When style modularization is needed: CSS Modules
    • Latest CSS-in-JS solution: StyleX

React UI libraries

  • Material UI (MUI) : A UI library still widely used in freelance projects. Based on Google's Material Design system
  • Mantine UI : The most popular UI library of 2022. Supports many features and custom styles
  • Chakra UI : The most popular UI library of 2021. Excellent accessibility and ease of styling
  • Hero UI : A UI library renamed from the former Next UI
  • Park UI : A UI library based on Ark UI
  • PrimeReact : Provides a variety of prebuilt (Prebuilt) UI components
  • Headless UI libraries
    • shadcn/ui (most popular in 2023-2024)
    • Radix (the foundation of shadcn/ui)
    • React Aria
    • Ark UI (developed by the Chakra UI team)
    • Ariakit
    • Daisy UI
    • Headless UI
    • Tailwind UI (paid)
  • UI libraries used less often
    • Ant Design
    • Semantic UI
    • React Bootstrap
    • Reactstrap
  • Recommended:
    • Styled UI libraries: MUI, Mantine, Chakra UI
    • Unstyled headless UI libraries: shadcn/ui, Radix

React animation libraries

  • Motion : The most recommended animation library (formerly Framer Motion)
  • react-spring : Enables physics-based animations

React charts and data visualization

  • D3.js : A low-level chart library; powerful but with a steep learning curve
  • Recharts : An easy-to-use chart library. Allows basic customization
  • visx : Works similarly to D3 but is React-friendly
  • Other chart libraries : Victory , nivo , react-chartjs
  • Recommended:
    • Simple charts: Recharts
    • D3-style customization: visx

React form libraries

  • React Hook Form : The most widely used React form library. Enables powerful form validation when used with zod
  • Conform : An emerging form library that integrates easily with full-stack applications
  • Formik , React Final Form : Traditional React form libraries, still used in some projects
  • Recommended:
    • When choosing a form library, use React Hook Form + zod

React code style and formatting

  • ESLint : A linter for maintaining code style. Popular style guides can be applied
  • Prettier : A tool that provides consistent code formatting. Can be used with ESLint
  • Biome : A fast Rust-based all-in-one linter and code formatter (formerly Rome). Drawing attention as an alternative to ESLint and Prettier
  • Recommended:
    • Use the ESLint + Prettier combination
    • Consider Biome as a new alternative

React authentication (Authentication)

  • Lucia : An authentication solution supporting OAuth and encryption features
  • Better Auth : One of the latest authentication services
  • Auth.js : An authentication library easy to use in Next.js and various frameworks
  • Paid authentication services : Clerk , Kinde
  • Firebase/Supabase-based authentication : Supabase Auth
  • Other authentication services : AuthKit , Auth0 , AWS Cognito
  • Recommended:
    • Easy authentication: Auth.js, Supabase Auth
    • Enhanced OAuth and security features: Lucia, Better Auth

React backend

  • Next.js : Provides server-side rendering (SSR) and API routes
  • Astro : A framework suited to generating static websites
  • tRPC : A solution for type-safe API communication
  • Hono : An ultra-lightweight server framework, usable with React
  • Traditional Node.js backend frameworks
    • Express : The most popular Node.js backend framework
    • Fastify : A high-performance Node.js framework
    • NestJS : Suited to large-scale applications
    • Elysia : A modern TypeScript-based backend
  • Other backend frameworks
    • Koa
    • Hapi
  • Recommended:
    • Full-stack React development: Next.js, tRPC
    • When a traditional backend is needed: Express, Fastify

React databases and ORMs

  • Prisma : The most popular TypeScript-based ORM
  • Drizzle ORM : An ORM drawing attention as an alternative to Prisma
  • Other ORMs and query builders : Kysely , database-js : PlanetScale only
  • Serverless databases
    • PlanetScale (paid)
    • Neon PostgreSQL serverless
    • Xata
    • Turso
  • Firebase/Supabase-based databases
    • Supabase PostgreSQL-based, self-hostable
    • Firebase Firestore
  • Recommended:
    • When an ORM is needed: Prisma, Drizzle ORM
    • Serverless databases: PlanetScale, Neon

React hosting

  • Self-managed servers : Digital Ocean , Hetzner
  • Fully managed hosting :
    • Vercel : Optimized for Next.js projects
    • Coolify : A middle-ground solution
  • Other hosting platforms
    • Render , Fly.io , Railway
    • CloudFlare , AWS , Azure , Google Cloud
  • Recommended:
    • Next.js projects: Vercel
    • When you need to manage your own servers: Digital Ocean, Hetzner

React testing libraries

  • Vitest : A testing framework faster than Jest and optimized for modern React projects. Provides test running, assertions, and mocking (mocking) features
  • Jest : A testing framework widely used in older projects as well
  • React Testing Library (RTL)
    • The leading library for testing React components
    • Provides HTML element rendering and event simulation features
  • Playwright
    • The most recommended E2E (End-to-End) testing tool
    • Enables automated testing across various browser and device environments
  • Cypress : A frontend E2E testing tool, competing with Playwright
  • Recommended:
    • Unit/integration testing: Vitest + React Testing Library
    • E2E testing: Playwright (or Cypress)
    • Snapshot testing option: Vitest

React and immutable data structures

  • Immer :
    • A library that makes it easy to work with immutable data structures
    • Lets you implement complex state change logic concisely

React multilingual (i18n) support

  • FormatJS : A powerful i18n library including formatting of dates, numbers, currencies, etc.
  • react-i18next : The most widely used multilingual support library in React
  • Lingui : Provides powerful multilingual support with minimal configuration
  • next-intl : A multilingual library for Next.js projects
  • Recommended:
    • Most common choice: react-i18next
    • Next.js-based projects: next-intl

React rich text editors

  • TipTap : A modern rich text editor with excellent extensibility
  • Plate : A powerful editor solution based on Slate.js
  • Lexical : A lightweight rich text editor made by Facebook
  • Slate : A customizable rich text editor framework
  • Recommended:
    • When flexible extensibility is needed: TipTap
    • Lightweight & optimized editor: Lexical

React payment systems

  • PayPal : One of the most widely used payment systems
  • Stripe : Provides a developer-friendly payment API
    • React Stripe Elements
    • Stripe Checkout
  • Other payment solutions
  • Recommended:
    • Easy payment solution: Stripe
    • When PayPal support is needed: PayPal or Braintree

Time and date handling in React

  • date-fns : Lightweight yet provides a wide range of date/time functions
  • Day.js : A lightweight alternative to Moment.js with a similar API
  • Recommended:
    • Lightest library: Day.js
    • Feature-rich library: date-fns

React desktop applications

  • Electron :
    • A cross-platform desktop application development framework
    • Lets you build Windows, macOS, and Linux applications with web technologies (HTML, CSS, JS)
  • Tauri
    • A lighter alternative to Electron that uses a Rust-based backend
    • Suited to projects where security and performance matter
  • Recommended:
    • Using web technologies as they are: Electron
    • Lightweight & security first: Tauri

React file uploads

  • react-dropzone : A React hook-based library for file uploads. Supports drag and drop

React email rendering

  • react-email (recommended) : Lets you build responsive HTML emails with React components
  • mjml : A markup language for easily generating HTML emails
  • Mailing : Helps developers easily create and manage emails
  • jsx-email : Lets you build email templates using JSX syntax
  • Email service providers :
    • Resend
    • Postmark
    • SendGrid
    • Mailgun
  • Recommended:
    • Building emails in React style: react-email
    • When an email service is needed: SendGrid, Mailgun

React drag and drop

  • @hello-pangea/dnd : The successor project to react-beautiful-dnd, offering easy usage
  • dnd kit : Highly flexible and customizable, but has a learning curve
  • Recommended:
    • Easy drag and drop: @hello-pangea/dnd
    • When customization is needed: dnd kit

React mobile development

  • React Native : A React-based cross-platform mobile application development framework
  • Expo : A toolchain that makes React Native development even easier
  • Tamagui : Lets you use the same UI components on web and mobile
  • Recommended:
    • Mobile development: React Native + Expo
    • Unified web and mobile UI: Tamagui

React VR/AR development

  • react-three-fiber : A Three.js-based 3D rendering library. Examples of VR support exist
  • react-360 (archived) : A VR/AR framework developed by Facebook (maintenance currently discontinued)
  • aframe-react (no longer maintained) : A library that lets you use A-Frame in React
  • Recommended:
    • Modern React 3D/VR library: react-three-fiber

React design prototyping

  • Figma : The most popular tool for UI/UX design and prototyping
  • Excalidraw : Lets you create hand-drawn-style wireframes and diagrams
  • tldraw : A sketching tool similar to Excalidraw
  • Recommended:
    • UI/UX design: Figma
    • Simple wireframes: Excalidraw

React component documentation

  • Storybook : The leading tool for UI component development and documentation
  • Docusaurus : A static site generator for technical documentation
  • Styleguidist : A style guide documentation tool centered on React components
  • React Cosmos : Provides an environment for developing and testing UI components in isolation
  • Recommended:
    • Component documentation: Storybook
    • Generating technical documentation: Docusaurus

JUST THE UI

Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.

VIRTUAL DOM

React abstracts away the DOM from you, giving a simpler programming model and better performance. React can also render on the server using Node, and it can power native apps using React Native.

DATA FLOW

React implements one-way reactive data flow which reduces boilerplate and is easier to reason about than traditional data binding.

with Axios

Use it together with React:useState or React:useReducer.

How to apply CSS

Using a JavaScript Object 

class MyJob extends React.Component {
  render() {
    const hstyle = {
      color: "black",
      backgroundColor: "blue",
      fontFamily: "Arial"
    }
    return (
      <div>
      <h1 style={hstyle}>Hello Style!</h1>
      </div>
    );
  }
}

Or if the CSS is written in Tag style 

import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';

class MyJob extends React.Component {
  render() {
    return (
      <div>
      <h1>Hello Style!</h1>
      </div>
    );
  }
}

When the CSS must be applied as a class 

.mainBody {
  background-color: white;
  color: blue;
  margin: 10px;
  font-family: Arial;
  text-align: center;
}

When applied in React: 

import React from 'react';
import ReactDOM from 'react-dom';
import styles from './App.css';

class MyJob extends React.Component {
  render() {
    return (
      <div>
      <h1 className={styles.mainBody}>Hello Style!</h1>
      </div>
    );
  }
}

How to apply environment variables

If you use CRA, every environment variable must start with REACT_APP_.

When actually using them, you must include REACT_APP_ as follows. 

{process.env.REACT_APP_ANSWER_DEPLOY === 'SRDC' ? <div /> : <div />}

In the end, you can put it in the package.json file using cross-env as follows. 

cross-env REACT_APP_ANSWER_DEPLOY=SRDC react-scripts build

onClick event handler prototype 

function handleClick(event: React.MouseEvent<HTMLDivElement, MouseEvent>) {
  event.preventDefault();
  console.info('You clicked a breadcrumb.');
}

export default function Search() {
  return (
    <div role="presentation" onClick={handleClick}>
      ...
    </div>
  );
}

ReactNode vs ReactElement

Tips

How to add a component to JAX with a unary condition like v-if

Uses the property that the && operation returns the result of the last condition. 

function Page() {
  return (
    <Box sx={{display: 'flex'}}>
      <Box />
      {workId !== 0 && drawer}
      <Box />
    </Box>
  );
}

Troubleshooting

Download the React DevTools 

Download the React DevTools for a better development experience: https://reactjs.org/link/react-devtools

Just go download the plugin lol

Missing "key" prop for element in iterator 

[eslint] Missing "key" prop for element in iterator [react/jsx-key]

When looping, you must add a key prop to the Element. Like this: 

return (
  <Stack direction="row" spacing={1}>
    {real.map(x => (<Chip key={x.id} label={x.value} sx={getChipStyle(x.color)} />))}
  </Stack>
);

React Hook useEffect has a missing dependency: 'xxx' 

ESLint: React Hook useEffect has a missing dependency: 'requestRows'. Either include it or remove the dependency array.(react-hooks/exhaustive-deps)

When developing with React Hooks, you will see the warning above a lot. It means you should add the state used inside useEffect to the array.

You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports 

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Redo the import of the component; the error may also have occurred because a name (letter case, etc.) differs among the connected components.

Inkscape SVG Import error 

SyntaxError: unknown file: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.

It seems to say that React cannot read XML Namespaces such as xmlns:svg, so you should use a form like xmlnsSvg... but that didn't work well.

When saving an SVG made in Inkscape, save it as Optimized SVG.

  • check the following at the options:
    • Shorten color values
    • Convert CSS attributes to XML attributes
    • Collapse groups
    • Create groups for similar attributes
  • SVG Output:
    • Remove the XML declaration
    • Remove metadata
    • Remove comments
    • Format output with line-breaks and indentation

Alternatively, use the scour package. The command line used was: 

scour answer-logo-onlytext.svg answer-logo-onlytext2.svg  --strip-xml-space --remove-descriptive-elements --enable-comment-stripping

react-hooks/rules-of-hooks

There are several cases of the react-hooks/rules-of-hooks Lint error: 

  Line 26:22:  React Hook "useLocation" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function  react-hooks/rules-of-hooks

React Hooks must be called inside a React function component or a custom React Hook function. In short, it means don't use Hooks in callbacks. 

  637:37  error  React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?  react-hooks/rules-of-hooks

React Hooks must be called in exactly the same order in every component render. In other words, don't call them inside conditionals such as if-else.

react-hooks/exhaustive-deps

An error like the following may be printed. 

src/components/ChargingCanvas.tsx
  Line 73:20:  Assignments to the 'preRectX' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect  react-hooks/exhaustive-deps

I've often seen this kind of warning while developing with React. It is a warning shown by the ESLint plugin installed by default in the React CRA (Create React App) environment.

This React Hook useXXX has a missing dependency warning means "If you use state, props, or functions in a hook, put them in the dependency array!"

React does not recommend intentionally leaving the dependency array empty when a hook uses values within the render scope. However, if you remove the dependency array or add the needed dependencies as the warning says, the component may not behave as intended or you may run into an infinite loop.

Solutions include using the useRef Hook.

App not updated to the latest version after deployment unless the browser cache is cleared

See React:CacheBusting.

Consider adding an error boundary to your tree to customize error handling behavior

The following error may be printed among the browser errors: 

The above error occurred in the <ReactDevOverlay> component:

ReactDevOverlay@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:37:27

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

See React:ErrorBoundary for related information.

To cut to the chase, check that in places like layout.js the

<html>

tag and the

<body>

tag, etc. are still intact.

Calling setState synchronously within an effect can trigger cascading renders 

Error: Calling setState synchronously within an effect can trigger cascading renders

Starting with React 19, React began warning against synchronous state changes inside effects. The reason is that calling setState inside useEffect immediately triggers another re-render.

In the worst case, an infinite loop like the following can occur:

  1. Component renders
  2. useEffect runs
  3. setState called → immediate re-render
  4. useEffect runs
  5. setState again...

A hook called useEffectEvent can be used as a solution here.

If you separate out the part that calls setState as follows, the error no longer occurs: 

const updateItemHeights = useEffectEvent((estimatedItemHeight: number) => {
    setItemHeights((prev) => {
      // ...
    });
  });

  useEffect(() => {
    updateItemHeights(estimatedItemHeight);
  }, [items.length, estimatedItemHeight]);

useEffectEvent separates the state-changing logic into an Effect Event so that it runs in a safe flow, like an event handler.

However, this is not the approach React wants. Since it cannot prevent the re-render, it is only a temporary workaround.

In practice, I solved it by using useMemo so that the heights I wanted to change are computed during rendering.

Existing memoization could not be preserved

See React:useCallback#Existing memoization could not be preserved for details.

See also

Favorite site

Guide

Turorials

Article

References

  1. Blog.coderifleman.com_-_learning_react_01.pdf ↩

  2. Webframeworks.kr_-_start_react.pdf ↩

  3. Why_React_and_Server_side_rendering.pdf ↩

  4. Meetup_TOAST_Cloud_-Introduction_to_the_JavaScript_Framework_4-_React.pdf ↩

  5. Learn_Webpack_for_React_-_ko.pdf ↩

  6. Secure_login_handling_at_the_frontend.pdf ↩

  7. Blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior.pdf ↩

author Zer0 sitemap