ngosangns Knowledge Base

React Next

#technology#react#nextjs#frontend

Updated: 2026-10-07

Source

React work inside a Next.js project touches hooks, rendering patterns and component libraries at the same time. This reference gathers the hooks worth knowing, including useActionState, useId and useWindowDimensions, alongside optimization notes for useMemo and useCallback. It continues into design systems built on shadcn/ui, SSR and Next.js rendering patterns, Docker deployment, a libraries section and a developer roadmap arranged by priority.

Resources

  • React ecosystem overview 2024
  • Official Next.js course
  • Guide to dockerizing Next.js
  • Comparison of state management in React
  • New hooks in React 19

Hooks

  • Comparing useEffect and useLayoutEffect

useActionState

  • A hook that manages the state of asynchronous actions in React
  • Tracks the state of an action:
    • pending: the action is being executed
    • fulfilled: the action completed successfully
    • rejected: the action failed
  • Benefits:
    • Simplifies managing the state of actions
    • Improves user experience by giving visual feedback on state
    • Reduces bugs in the application
  • Use cases:
    • Form submission
    • API calls
    • Data loading
    • Other asynchronous tasks

useId

  • A hook that generates unique IDs that are stable across renders
  • Ensures ID uniqueness across components, especially useful with dynamic rendering
  • Benefits:
    • Avoids ID collisions in the DOM
    • Ensures consistency between renders
    • Improves accessibility
  • Use cases:
    • Linking HTML elements together (e.g. <label> and <input>)
    • Generating unique IDs for elements in dynamic lists
    • Generating IDs for components rendered multiple times

useWindowDimensions (@microui-kit/use-window-dimensions)

  • A hook that returns accurate screen dimensions
  • Especially useful on mobile, where the address bar and navigation bar show and hide
  • isSetProperty option:
    • Adds the CSS variables var(--app-width) and var(--app-height) to the <html> tag
    • Use them anywhere in CSS

Optimization

  • Optimizing with useMemo and useCallback
  • Two common re-rendering mistakes
  • Tool for bootstrapping full-stack React projects: refine.new

Docker And Deployment

  • Dockerfile Optimization Techniques: a detailed analysis of 5 Dockerfile optimization techniques for a React SPA (BusyBox httpd, Distroless Nginx, Scratch Nginx, Go FastHTTP, Alpine Nginx) - Dockerfile Optimization Techniques

Design Systems

  • shadcn/ui: reusable components, Radix UI + Tailwind CSS
  • RetroUI: a NeoBrutalism-style React component library built on shadcn/ui + Tailwind CSS. Copy-paste ready, TypeScript support. Install via npx shadcn add @retroui/<component>. A Pro version offers 100+ premium blocks and templates - https://www.retroui.dev/
  • Neobrutalism Components: a neobrutalism-style UI component set based on shadcn/ui + Tailwind CSS. WAI-ARIA compliant, open source (MIT). Components: buttons, badges, alerts, forms, cards, carousels, OTP input, breadcrumbs, resizable panels - https://www.neobrutalism.dev/
  • HextaUI: foundation components and blocks built on top of shadcn/ui, with motion and states already handled (e.g. number-flow, file tree, OTP input, deploy cards, questionnaire). Install via the shadcn CLI registry so the source lands in your project. MIT, by Preet Suthar; a paid Pro tier adds premium blocks - GitHub · Site
  • React Bits: animated, interactive, customizable React components you copy-paste into your project. The free version (open source, DavidHDev/react-bits) has 200+ components: text animation, backgrounds, UI, micro interactions; each component comes in 4 variants: JS-CSS, JS-TW, TS-CSS, TS-TW. Install via shadcn or jsrepo, e.g. npx shadcn@latest add @react-bits/BlurText-TS-TW. Site: https://reactbits.dev/. The paid React Bits Pro adds marketing blocks, application UI, templates, and an agent kit; it installs the same shadcn way (npx shadcn@latest add @reactbits-pro/hero-7), and the source lives in your own repo.
  • ReUI: a design-forward shadcn/ui platform by KeenThemes, copy-and-own via the shadcn CLI registry (npx shadcn@latest add @reui/data-grid). 1,175 free composed examples across 83 categories, shown inside realistic dashboard layouts rather than isolated demos, plus 24 in-house primitives not in base shadcn/ui (Data Grid on TanStack Table + Virtual, Event Calendar, Gantt, Kanban, Filters, Cascader, Code Block, Sortable, Timeline, Stepper, Tree...) — each in-house component ships in both Radix UI and Base UI flavors and works with all Shadcn Create styles. MIT, TypeScript, Tailwind CSS 4+; a paid Pro tier adds premium blocks - GitHub · Site
  • Arco Design: ByteDance enterprise design system from the GIP UED team and the Infrastructure FrontEnd team. MIT, TypeScript, more than 60 components in the React README. React package @arco-design/web-react is 2.66.16, tagged 2026-07-14, in arco-design/arco-design (last push listed 2026-08-24). Needs react and react-dom >= 16.8. Named imports tree-shake. Full stylesheet is @arco-design/web-react/dist/css/arco.css. The docs say the CDN build pulls the whole library. React 19 needs import '@arco-design/web-react/es/_util/react-19-adapter' at the top of the entry file. Default theme is ArcoBlue. Tokens are Less variables and CSS custom properties: changing @arcoblue-6 fills steps 1–10 and the dark inverse. The CSS-variable path does not support IE. Dark mode is the second palette on those variables. Design Lab is the recommended theme tool. Icon Box and the material market sit beside it. ConfigProvider sets locale, size, and prefixCls (default arco). The FAQ says SSR works, and that compiling Arco and Ant Design as Less lets their variables overwrite each other, so import Arco's CSS in that case. v2 renamed ByteDesign: @bytedesign/web-react became @arco-design/web-react, and the class prefix moved from byte- to arco-. README browser row: Edge 16, Firefox 31, Chrome 49, Safari 31, Opera 36, Electron last 2 versions. Vue 3 is @arco-design/web-vue 2.58.0 (2026-04-16). Mobile React is @arco-design/mobile-react 2.39.1, rem-based with a 50px root and flexible.js. Arco Pro is the admin starter. arco init still offers Next, Vite, and Create React App. Site: https://arco.design/
  • SakaniUI: single-author React 19 design system built 1:1 from a Figma file (npm @sakaniui/react, MIT), with 114+ components, 42 copy-and-edit blocks, token theming, light/dark and Solid/Glass/Liquid glass surfaces. Installed as a package, not copy-paste like shadcn. See SakaniUI.
  • audiocn: shadcn/ui registry of copy-and-own React audio components (meters, visualizers, faders, knobs, mixer, player, sound pads) with Web Audio hooks, built on Base UI and Tailwind v4, MIT, by OrcDev and fortysevenfx. Install with npx shadcn@latest add @audiocn/level-meter. See Audiocn.
  • Semi Design, Tamagui, Aceternity UI, Magic UI, Tremor, Mantine, 9ui, seraui, Nurui, Blocks, basecoat
  • Icons: animateicons
  • Components: xyflow (React Flow)

SSR - Server-Side Rendering

  • Fastify Vite React: integrates Fastify, Vite, and React for SSR

Next.js Rendering Patterns

  • ISG: Incremental Static Generation - adds dynamic content to static pages
  • ISR: Incremental Static Regeneration - regenerates static pages over time

React For Two Computers

  • Concept: React can run across two different computers, with a focus on React Server Components
  • Difference between tags and function calls:
    • Tags usually represent nouns, describing structure
    • Function calls usually represent verbs, describing actions
    • Tags are like blueprints; function calls are like recipes
  • Splitting work between two computers:
    • Part of the work can be done on the first computer (server)
    • The rest is then handed to the second computer (client) to continue
    • This allows optimizing performance and user experience
  • Challenges:
    • Ensuring the two runtime environments are completely separate
    • Not sharing state or global variables between server and client
    • Ensuring consistency between server-side and client-side rendering
  • Benefits:
    • Optimizes performance by running part of the logic on the server
    • Reduces load on the client and improves page load time
    • Supports React Server Components to render part of a component on the server

https://overreacted.io/react-for-two-computers/

Static Site Generators

  • Nextra: an SSG based on Next.js

Visual Builder

  • Plasmic

Framework

  • Refine: a React framework for internal tools, admin panels, dashboards

Libraries

  • React in Vue / Vue in React: veaury
  • Build CRUD app: refine
  • Toolkit for Nextjs: Blitz.js (Zero-API)
  • Runtime CSS-in-JS: kuma-ui (zero-runtime)
  • React-scan: performance analysis
  • Animation: GSAP, React Bits, motion (motiondivision/motion) - a modern animation library for React and JavaScript: https://github.com/motiondivision/motion
  • Cursor Animation: Cursify - cursor animation library for React and Next.js - https://github.com/ui-layouts/cursify
  • Gesture: use-gesture (pmndrs/use-gesture) - a library providing hooks to recognize and handle gestures such as drag, touch, and scroll in React apps: https://github.com/pmndrs/use-gesture
  • i18n: react-i18next
  • State management: Recoil, React Signify
  • Chart: Victory, Tremor, Recharts, Visx (Airbnb)
  • Rich text editor: Hackernoon, Plate (Slate.js)
  • PDF Highlighter: react-pdf-highlighter-plus - a modern React library for highlighting and annotating PDFs with many features: text highlights, area highlights, freetext notes, images/signatures, freehand drawing, and exporting the annotated PDF - GitHub #pdf #annotation #highlight
    • Highlight types: Text, Area, Freetext (draggable, editable), Image/Signature, Freehand drawing
    • Features: zoom support, coordinate systems (viewport/scaled), PDF export with annotations, context-based API
    • Main components: PdfLoader, PdfHighlighter, TextHighlight, AreaHighlight, FreetextHighlight, ImageHighlight, DrawingHighlight
    • Hooks: usePdfHighlighterContext(), useHighlightContainerContext()
  • Lint and optimize: Million.dev
  • Grid Layout: react-grid-layout - a library for draggable, resizable grid layouts with responsive breakpoints for React - GitHub #grid #layout #drag-drop
  • Maps: mapcn (AnmolSaini16/mapcn) - a library of beautiful map components, zero config, one-command setup. Built on MapLibre GL, styled with Tailwind, compatible with shadcn/ui. Features: theme-aware (light/dark mode), markers and popups, routes, controls (zoom, compass, locate, fullscreen) - GitHub #maps #maplibre #shadcn
  • Component systems: originui, magicui, cuicui, mantine, dotUI, tailus-ui, React Bits, heroui, starwind-ui, animate-ui
  • Sora UI: a "motion-first" animated component registry for React/Next.js, copy-paste like shadcn; a major redesign of Animate UI. Stack: React 19, Tailwind CSS v4, Base UI/Radix UI, Motion + GSAP. It has 4 layers: Motion (building blocks and effects), Icons (an animated Lucide icon set), Catalog (showcases, page layouts), UI (base components with Motion + Tailwind built in). There is an official MCP server so AI agents can understand component behavior, constraints, and metadata. MIT - GitHub · Docs #animation #components #motion #shadcn #mcp
  • Novu: multi-channel notification platform (In-App, Email, SMS, Push, Chat)
  • Graphics: react-three-fiber (Three.js renderer)
  • NextAuth.js: an authentication solution for Next.js and React, supporting many sign-in methods such as OAuth, email, and more - GitHub #authentication #nextjs #oauth

Compilers

  • Million.js: an optimizing compiler, 70% faster

React Developer Roadmap

🔴 Must Know

  • HTML: Basic, Semantic, Forms, Graphics, Multimedia, APIs
  • JavaScript: Syntax, DOM Manipulation, IIFE, Scope, Hoisting, Closures, Callbacks, Promises, Async & Await
  • Build Tools: npm/yarn/pnpm, Webpack/Browserify/Rollup/Parcel, npm scripts
  • State Management: Redux (Component State, Async Actions, Helpers, Data Persistence)
  • API Clients: Fetch/axios (REST), Apollo/Relay/urql (GraphQL)

🟡 Recommended

  • Styling: Sass/PostCSS, Bootstrap/Materialize/Bulma, Styled Components, material-ui/react-bootstrap/chakra-ui
  • Type Checkers: PropTypes, TypeScript
  • Routing: React Router
  • Utility Libraries: Lodash, Moment, classnames
  • Testing: jest (Unit), Karma (Integration), Cypress/Puppeteer (E2E)
  • Internationalization: React Intl, React i18next
  • Mobile: React Native

🔵 Good to Know

  • CSS Preprocessors: Less, Stylus
  • CSS in JS: Radium, Emotion, Aphrodite
  • UI Frameworks: semantic-ui-react, react-bulma
  • Redux: Redux Saga/Thunk, Rematch, Reselect, Redux Persist
  • Type Checkers: Flow
  • Routing: Router5, Redux-First Router, Reach Router
  • API Clients: SuperAgent
  • Utility: Numeral, RxJS, ImmutableJS, Ramda
  • Testing: Enzyme, Mocha, Chai, Sinon, AVA, Tape, Selenium, Cucumber, Nightwatch
  • Mobile: Cordova
  • Desktop: Proton Native, Electron, React Native Windows
  • AR/VR: React 360, Viro React

See also: Text Editor React · Vue And Nuxt · CSS Tools · Frontend Overview