#React
16 posts tagged with this topic. ← All tags
-
Selectors in Redux: the layer that keeps components dumb about state shape.
How selector functions decouple your components from your Redux state structure, and why memoized selectors with Reselect belong in every Redux codebase.
-
RTK Query vs useEffect: the comparison that changed how I fetch data.
A side-by-side look at fetching data with useEffect versus RTK Query, and why the latter eliminates entire categories of bugs.
-
Virtualizing long lists: rendering 10,000 rows without freezing the browser.
How virtualization works, how to implement it with react-window or TanStack Virtual, and what to consider when your list has variable-height items.
-
React.lazy and Suspense: loading code only when you need it.
How code splitting with React.lazy and Suspense works, how to apply it to routes and heavy components, and what to watch out for.
-
Optimistic UI: updating the screen before the server responds.
How optimistic UI works, how to implement it in React, and how to roll back cleanly when the server request fails.
-
Formik + Yup: form validation that doesn't require 50 lines of state.
How to use Formik for form state management and Yup for declarative validation schemas, replacing boilerplate useState and error-tracking logic with a clean, structured approach.
-
Controlled vs uncontrolled inputs: why mixing them causes unreproducible bugs.
The difference between controlled and uncontrolled form inputs in React, why switching between them causes warnings and bugs, and when to use each approach.
-
Error boundaries: the component that keeps one crash from killing the page.
How error boundaries work, how to implement one, and where to place them so a single component crash doesn't take down the entire React application.
-
React Router nested routes: the layout pattern that removes repeated code.
How to use nested routes in React Router v6 to share layouts across pages, eliminating duplicated navigation and wrapper components.
-
Context API performance: the provider pattern that doesn't re-render everything.
Why Context causes unexpected re-renders, and how to structure your providers to limit re-renders to only the components that actually consume the changed value.
-
Custom hooks: the extraction rule that keeps them actually reusable.
When to extract a custom hook, how to name and structure it for genuine reusability, and the mistakes that make custom hooks more complex than the code they replaced.
-
useRef: the escape hatch that lets you break React's rules safely.
What useRef is for beyond DOM access, when to use it instead of useState, and the situations where mutating a ref is the correct solution.
-
useMemo and useCallback: the optimization you're probably adding too early.
What useMemo and useCallback actually do, when they help, and why adding them everywhere makes your code slower and harder to read.
-
useEffect's dependency array is a contract. Breaking it causes silent bugs.
Why the useEffect dependency array is not a performance optimization but a correctness requirement, and what happens when you leave things out of it.
-
useState anti-patterns that cause re-renders you can't explain.
The most common useState mistakes that create unnecessary re-renders, stale state, and bugs that are hard to trace back to their source.
-
React's core model: UI as a function of state. Everything follows from this.
The single idea behind React's design: UI = f(state). Once you internalize this, useState, re-renders, and component composition all make sense as consequences of one principle.