How to Build Polymorphic React Components with TypeScript
Build polymorphic React components that render as any element with an as prop. Type the pattern with ElementType and generics in TypeScript.
Build modern UIs with React
Build polymorphic React components that render as any element with an as prop. Type the pattern with ElementType and generics in TypeScript.
Type generic React components so their props depend on the data type at each call site. Learn function generics and the arrow function comma.
useState is the React Hook that lets a component remember values between renders. Learn how it works with practical examples.
Update React state with an updater function when the next value depends on the previous one. See why it avoids stale reads and double-click bugs.
React state only changes for the next render, not the line that sets it. Learn why the value looks stale and how snapshots and batching work.
Update objects in React state by replacing them with new copies instead of mutating. Use the spread syntax for flat fields and nested updates.
Update arrays in React state by replacing them with new arrays. Use spread, filter, map, and slice instead of push and splice.
Remove, replace, and reorder array items in React state with filter, map, and a copied array. Keep every list update immutable.
Initialize useState lazily by passing an initializer function. React runs it once, so expensive setup is not repeated on every render.
React batches state updates by waiting for an event handler to finish, then applying every change in one re-render. See how batching works.
Use one state object for values that change together and multiple useState hooks for values that change independently. See the deciding rule.
Reset React state by setting it back to the initial value or remounting the component with a new key. Pick the right approach for each case.