Practical React Wiki for Working Developers
Guides, libraries, snippets, and interview prep — plus AI tools — curated for developers who ship React in production. Free, no sign-up required.
Fresh guides
Latest guides
Your React Project Starts Clean. Six Months Later, Nobody Wants to Touch It. Here's Why.
How to quantify code decay in React apps using observable architectural signals—component coupling, prop sprawl, hook fragmentation—and turn entropy into an actionable engineering metric.
6/25/2026 · 17 min read
React vs Next.js in 2026: Why This Choice Keeps Splitting Teams in Half
React is a UI runtime; Next.js is a data orchestration layer — this article dissects how their fundamentally different approaches to fetching, caching, and synchronizing data shape architecture, correctness, and developer intent.
6/24/2026 · 14 min read
I Paid $4 for a Mac App. Then I Found the One Terminal Command It Was Running.
How macOS’s “$4 app → one-line command” pattern reveals a deeper truth about interface design: minimal viable interfaces aren’t just lightweight—they’re composable, stateless, and free of abstraction tax—exactly what React encourages at its core.
6/23/2026 · 9 min read
When useState Lies to You (And Why That’s By Design)
useState doesn’t hold values—it holds *promises*. Its “lies” (frozen reads, delayed writes, closure-scoped snapshots) aren’t bugs—they’re deliberate abstractions that uphold React’s consistency contract.
6/22/2026 · 5 min read
Open Source
React Libraries
React Aria: Adobe's Open Source Library That Gives Your Component Library Accessibility for Free
React Spectrum is Adobe’s opinionated, accessibility-first open-source stack—comprising React Spectrum (styled components), React Aria (unstyled hooks), React Stately (cross-platform state), and Internationalized (i18n)—built to enforce design consistency at enterprise scale while enabling deep extensibility.
visx as React’s Missing Primitives for Data Graphics
visx is a collection of low-level, composable React components for building data visualizations—not prebuilt charts, but foundational building blocks like `<Bar />`, `<Line />`, and `<Axis />`, designed to work like native UI primitives.
What Happens When Radix, Floating UI, and MUI Join Forces?
Base UI is an unstyled, accessibility-first React component library built collaboratively by the core teams behind Radix UI, Floating UI, and Material UI — representing a rare convergence of ecosystem primitives, composability philosophy, and WAI-ARIA rigor.
Run state-of-the-art AI models directly in the browser — no backend, no API keys, no latency
transformers.js brings Hugging Face’s vast ecosystem of pretrained ML models to JavaScript environments, enabling zero-server, privacy-preserving, client-side inference for NLP, vision, audio, and multimodal tasks.
Floating UI — A battle-tested, accessible positioning engine for tooltips, popovers, dropdowns, and other floating elements
Floating UI is a lightweight, TypeScript-first library that solves the notoriously hard problem of correctly positioning and interacting with floating UI elements—while guaranteeing visibility, accessibility, and cross-platform flexibility.
tldraw/tldraw — A production-grade, infinitely extensible React SDK for building collaborative whiteboards, diagrams, and AI-augmented canvas apps
tldraw is a TypeScript-first, React-native infinite canvas SDK that eliminates the years-long engineering effort required to build performant, multiplayer, cross-platform drawing and diagramming experiences.
Copy & paste
React Snippets
import { useReducer } from 'react';
const formReducer = (state, action) => {
switch (action.type) {
case 'UPDATE_FIELD':
return {
...state,
values: {Form State Management with useReducer
A reusable, type-safe React hook for managing complex form state (values, errors, touched) using useReducer.
import { useState, useEffect } from 'react';
function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T | ((prevValue: T) => T)) => void] {
// State to store our value
// Pass initial state function to useState so logic is only executed once
const [storedValue, setStoredValue] = useState<T>(() => {
try {
const item = window.localStorage.getItem(key);React hook for persistent state in localStorage
A custom React hook that synchronizes component state with browser localStorage, supporting functional updates and error resilience.
import { useState, useEffect, useRef } from 'react';
interface UseIntersectionObserverOptions
extends Partial<IntersectionObserverInit> {
threshold?: number | number[];
rootMargin?: string;
}
Intersection Observer Hook for Lazy Loading and Animations
A lightweight, reusable React hook that triggers callbacks when elements enter or leave the viewport—ideal for lazy-loading images or starting animations.
import { useState, useEffect, useRef } from 'react';
export function FadeIn({ children }: { children: React.ReactNode }) {
const [isVisible, setIsVisible] = useState(false);
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
const node = ref.current;Fade-in animation with requestAnimationFrame
A performant, CSS-in-JS fade-in animation using useState, useEffect, and requestAnimationFrame for smooth entrance transitions.
import { useState, useCallback, useMemo } from 'react';
interface UseFormOptions<T> {
initialValues: T;
validate?: (values: T) => Partial<Record<keyof T, string>>;
}
interface UseFormReturn<T> {Lightweight useForm hook with validation and dirty tracking
A minimal, self-contained React hook for form state management with validation, dirty tracking, and submission handling—no external dependencies.
import { useState, useEffect, useRef } from 'react';
export function DebouncedSearchInput({
onSearch,
delay = 300,
}: {
onSearch: (query: string) => void;
delay?: number;Debounced search input with useEffect and useRef
A reusable search input that delays API calls until user stops typing for a specified duration.
Get hired
React Interview Questions
- How does React.memo work, and what are its limitations with props containing objects or functions?Medium
- What is the purpose of the 'key' prop, and what are common anti-patterns when assigning keys?Medium
- When would you choose Context API vs. a dedicated state management library like Zustand or Redux Toolkit?Medium
- Describe how React Router v6's data APIs (e.g., useLoaderData, useActionData) differ from prior versions and why they matter for data loading.Medium
- What is the virtual DOM and how does it improve React's performance?Medium
- Explain the rules of Hooks. Why must they be called at the top level and in the same order?Hard
- How does useState work under the hood? What happens when you call it multiple times in one component?Hard
- What are the key differences between useMemo and useCallback, and when would you use each?Medium
Decide faster
Tech Comparisons
- ⚖Vite vs Webpack: Bundling Speed and DX Versus Configurability and Ecosystem ReachBuild Tools
- ⚖CSS Modules vs Emotion: Scoped Styling with Native Tooling vs Dynamic, Theme-Aware StylesStyling
- ⚖TanStack Router vs React Router: Type-Safe, Compiler-Powered Routing vs Declarative, Community-Established PatternsRouting
- ⚖Zustand vs Redux: Simplicity and Bundle Size Versus Ecosystem Maturity and Middleware SupportState Management
Free tools
AI helpers & utilities
View all →Hook Generator
Describe it in plain English, get a runnable custom hook.
Code Explainer
Paste React code and get a clear, concise walkthrough.
Error Decoder
Paste a React error and get the cause, the fix, and how to prevent it.
Code Converter
Modernize old React code — add TypeScript or convert classes to functions.
A practical React wiki for working developers
react.wiki brings together the resources React developers use every day: read practical guides and deep dives, discover hand-picked React libraries worth your time, grab production-ready code snippets, prepare with real interview questions, compare options in tech comparisons, and speed up everyday work with our AI tools. Free, no sign-up required.