React JS Best Practices - Beginner To Advanced

Learn how useState behaves asynchronously in React and apply two patterns to access the latest value: read from the event in the handler, or compute outside the closure.

initialize your component state to prevent uncontrolled to controlled input warning in React by always providing a default value for useState, such as an empty string.

Identify and fix unnecessary useEffect usage that causes extra rerenders by deriving chars from value.length and removing redundant state updates, improving performance and readability.

Identify common React mistakes by avoiding in-place mutations of state objects; use the spread operator to create a new object and update data, triggering a proper re-render.

Master prop drilling in React and learn practical fixes by fetching user data with use query and exposing it directly to consuming components.

Discover how to escape the provider wrapping chaos in React by using a providers tree that composes a single, well-structured set of providers for better readability and maintainability.

Learn why rushing to use React.memo can backfire and how to prevent unnecessary rerenders by separating state into a dedicated dynamic background component and leveraging children.

Avoid syncing React state with useEffect; update the is valid age in the input handler using the event value to prevent stale state and side effects.

Demonstrate proper React conditional rendering of lists by avoiding array.length on the left side of &&, use length > 0 to prevent zeros and render null when empty.

Identify an unnecessary useEffect that triggers extra re-renders; replace it with a check before the return statement for selectedCourse === null to set a default course and reduce wasted renders.

Learn to avoid the impossible loading state in React by replacing boolean is loading with a four-state status (idle, pending, successful, rejected) for clearer, more reliable data fetching.

Encapsulate data in React components by building a user model with private settings and public getters, exposing only theme mode and full name to the user interface.

Learn how to prevent wasteful re-renders by relocating the name state into a separate form component, so the expensive component stops re-rendering when typing.

Learn to prevent impossible states in React by replacing boolean flags with a single status state, empty or typing, and deriving is empty and is typing from it.

Master proper ref usage in React by avoiding reading or writing ref.current during rerendering; update it inside useEffect or event handlers, and pass its value to functions.

Group related states into a single object that changes together, using a pose state with x and y properties and updating with the state setter.

Explore the state reset technique in React by changing a component key to remount it, resetting input state on button click and understanding remount behavior.

Derive the full name from the first name and last name instead of storing it in state, reducing redundancy and improving readability and maintainability of React components.

Learn how to reduce duplicate fetches in React by caching the users list. The first fetch caches data so subsequent components read from the cache, improving performance.

Replace nested conditional rendering with a role-based view map in React using a current view from a rolesViews object, with a default guest view when no role prop is present.

Refactor conditional rendering with a switch component using case and default, aided by util helpers, to improve readability, maintainability, and score-based logic in scoreboard components.

Learn how to implement a handler that returns a function in React to cleanly pass a product to a click handler. Update the selected product state and simplify onClick logic.

Refactor a nested if statement into a single, cleaner return by inlining branches, combining checks, and using destructuring for stock and payment status.

Normalize your state by switching from an array of users to an entities map keyed by id, enabling constant-time lookups and faster rendering in React front end apps.

learn how to access form data without multiple states by using the form data class and Object.fromEntries to convert inputs into JSON for easier validation and backend submission.

Create portals render React elements into a separate DOM node, such as a body or dedicated div, while maintaining component placement; handle event bubbling as expected from parent components.

Learn how to forward a ref to a custom React input component using forward ref, pass the ref from the parent, and attach it to the input for access.

Explore error boundaries in React by using a class component with a hasError state to render a fallback UI and log errors, preventing blank screens in case of rendering failures.

Learn how keys dictate identity and rerendering in React, using distinct parent elements to isolate component state and force remounts when keys change, ensuring predictable rendering behavior.

Explore how React handles click events through the capturing and bubbling phases, and learn to enable the capture phase by adding capture to the event handlers.

Refactor a simple cart context into a dedicated cart context file with a provider and useCartContext hook. Split into separate state and dispatch contexts to reduce re-renders and boost performance.

Avoid fetching data inside useEffect; instead use React Query to fetch with caching, loading and error handling, and to optimize bandwidth and memory while supporting server rendering.

Learn how to prevent race conditions in useEffect by using an abort controller to cancel stale fetch requests and clean up with an effect cleanup function.

Identify a wasted re-render in a parent–toggle pattern and prevent it by updating local state and notifying the parent inside an event handler, instead of triggering updates via useEffect.

Identify reusable logic in React components and extract it into a custom hook like useUser to fetch user data with useEffect. Use the hook in components to avoid repetition.

Learn to measure an element's height in React by using a useCallback ref to access the DOM node, update height with getBoundingClientRect, and avoid unreliable useEffect dependencies.

Learn how useEffect can trigger infinite loops when a newly created user object changes on every render, and how useMemo or moving the user object avoids the loop.

Use useCallback when passing a function to a memoized, expensive child component wrapped with React.memo. For simple components like a basic button, avoid useCallback to keep code straightforward.

Explore useEffect with different dependencies, after every render, after initial render and changes, or once with an empty array, and build a custom hook that runs after updates.

Explore how custom hooks increase readability by abstracting array operations into a reusable useArray hook that exposes add and remove helpers, keeping component logic clean and reusable.

Use named, labeled functions inside useEffect to describe the effect. This approach makes it clear when the user data is fetched as the user ID changes.

Separate the UI from data fetching to enforce separation of concerns, using a custom hook like useProduct to manage product data and keep the product page focused on display.

Identify and fix a common React pitfall: avoid sending post requests inside a component render using useEffect; instead trigger emails via the subscribe button event handler to prevent unintended emails.

Identify and remove unnecessary useEffect and extra state, move calculations from render, and use useMemo with a dependencies array to memoize when products change for better performance.

Centralize state updates by using a useReducer-based shipping reducer to handle price calculations, while the component dispatches calc shipping rate actions and displays the result.

Learn how the useReducer pattern streamlines form state management by centralizing updates with a reducer, enabling cleaner APIs, better control over changes, and easier validation.

Explore how use layout effect differs from use effect and when to use it to avoid UI lag, using a toggle that calculates the top position from a button ref.

Explore the useId hook to generate unique ids for inputs, preventing duplicate htmlFor targets and ensuring proper focus across duplicated forms.

Explore how to use useImperativeHandle with forwardRef to restrict a component's exposed ref to a focus API, illustrated with two inputs and a safe, imperative surface, plus dependency-based updates for performance.

Use the use deferred value hook with React memo to smooth typing in a heavy component scenario, deferring the keyword updates so the input remains responsive during background fetches.

Learn to fetch data asynchronously with React Router v6 using Suspense, Await, and defer to render delayed data alongside static UI, plus lazy load routes like club.

Discover how TypeScript’s Partial type helper makes properties optional on a given type, enabling partially complete objects. See button props with color, font, and onClick, plus API and style components.

Learn how exhaustive switch and branching checks in TypeScript ensure every case is handled, using assertion unreachable to catch unhandled cases and write more reliable, type-safe code.

Explore the keyof operator in TypeScript to extract a type's keys by placing key of before a type or interface, yielding a union of property names on the left side.

Discover the TypeScript record utility by building an object from a keys union like color, size, and padding, and learn how the two-argument record defines keys and value types.

Learn to apply TypeScript conditional types with extends and the ternary operator to shape and transform types using generics, key of, in operator, template literal, and index access.

Discover how the TypeScript satisfies keyword enables an object to satisfy a DB type, providing flexible yet precise typing, enabling pre-validation and safer handling of union types.

Learn how let enables reassignment and a flexible string type in TypeScript. Explore how const fixes a single literal value and how literal types work for strings and numbers.

Map types in TypeScript apply the dry principle by transforming object types with the key of keyword to create optional properties and string key-value maps.

Learn how to rename keys in TypeScript using map types to create getters like getId and getName, preserving original value types with arrow functions and template literals.

Explore TypeScript union and intersection types, learn how unions require satisfying one member while intersections require all, and see how common properties like text are accessed.

Learn to intersect string literal types to derive React component handler props, using key of and template literals for on click, on submit, and on hover with type safety.

Discover the type of operator in TypeScript, how it extracts types from values and properties, and how let, const, and literals shape broad versus literal types.

Learn how generics in TypeScript create a single flexible async response type that handles status, status code, and data, such as a users array of strings.

Explore this generics cheat sheet to refresh your TypeScript syntax and see how generic types fit together across common scenarios, especially for technical interviews.

Explore a case study that builds a type-safe React table component using TypeScript generics, with columns and rows, label accessors, and mapped headers and cells.

Understand the difference between any and unknown as top types in TypeScript. Unknown is safer and must be narrowed with type assertions or equality checks before use.

Use the omit utility to remove keys from a type, creating a new type by dropping specified keys. Removing id and card number from props leaves name and age.

Learn how the nullish coalescing operator works in TypeScript, returning the left value unless null or undefined, and contrast it with the or operator to guard against errors.

Use the pick utility type to create derivative types by selecting keys from a type; the second argument lists the keys to include, forming a union and contrasting with omit.

Learn how the TypeScript return type utility builds a type from a function’s actual return values, reducing code and safely capturing possible outcomes such as false, yes, or duh.

Explore index access types in TypeScript by using square brackets to access nested properties of a type or interface, and map over keys to build complex, type-safe data objects.

Demonstrate how mapped types and the in keyword create a clean union type for user activity data. John or Alex appear as keys, each with their activity object.

Discover how the required type in TypeScript, the opposite of the partial utility type, transforms all properties to required and guarantees the presence of every property on a data structure.

Explore discriminated unions to model interdependent response types, using status to distinguish success with data from error with a mandatory message for safer, clearer, more maintainable code.

Master const assertions with as const in TypeScript to create narrow, read-only types and extract admin names from objects, updating types as new admins are added.

Tune your TypeScript setup with tsconfig.json, choosing strict or relaxed compiler options, and enable noImplicitAny to catch implicit any errors before runtime.

Explore configuring tsconfig to flag unused parameters in TypeScript, enabling no unused parameters in compilerOptions to emit warnings or errors and promote cleaner code.

Explore how the TypeScript non-nullable utility excludes null and undefined from a union type, ensuring variables carry a value and reducing runtime errors.

Demonstrates avoiding prop mutation by using TypeScript read only concepts and a recursive deep read only type to protect nested props.

Wrap list rendering with React.Children.toArray to auto generate keys from mapped items, avoiding manual keys and reconciliation issues, while flattening undefined or booleans from the map.

Learn to compare a previous prop or state value to the current value in a React component using the usePrevious hook, which relies on useRef and useEffect to track values.

Learn how to preload high-priority images using the React Helmet Async library, signaling the browser to load them early and reduce page render flicker.

Learn how render props pass a prop to a React component to conditionally render either a maintenance page or the main app, controlled by a maintenance provider.

Learn how to type props in React with TypeScript by examining three common methods: using react.fc with props, destructuring with an interface or type, and typing props directly.

Compare TypeScript types and interfaces, highlighting when to use interfaces for object shapes and contracts, and when to use types for props, states, and complex aliases in React.

Learn function overloading in TypeScript by implementing an add function with multiple signatures, handling two numbers with a promise-based result or a callback, and optional parameters in React.js projects.

Apply higher order components to decouple mouse position logic from presentation, using a presentational component wrapped by a withMouseMove hoc, with render props and custom hooks.

Explore a higher-order component pattern in React by wrapping a presentational mouse-position display with the withMousePosition HOC, managing x and y via TypeScript props.

Use the render props pattern to build a wrapper component that computes mouse position and passes x and y as props to children, showcasing a reusable React approach.

Implement a custom hook to track mouse position in React with TypeScript, returning x and y and an on mouse move handler, and consume it in app.tsx.

Learn how to limit prop composition in a React button component with TypeScript types that enforce a single variant (primary or secondary) and a build class names utility.

Explore requiring props composition in a React text pan by using TypeScript function overloads to enforce that expanded props accompany short, with three overloads and optional booleans.

Learn to replace verbose prop typings with concise React event handler types in TypeScript, using mouse event handler, focus event handler, and change event handler for clearer, readable code.

Learn how to type React components that receive children using props with children, compare intersection typing with a cleaner generic approach, and apply it to a nav bar component.

Learn how to replace complex union types with the ReactNode type in TypeScript to type page props safely and readably.

Learn a scalable approach to calculating class names for React components using a helper function that builds a space-separated list from booleans and props like base, primary, outline, and disabled.

Replace class-name based styling with explicit props on a button component, using primary and destructive options to control styles and reduce config exposure.

Learn how to make a modal extensible by destructuring props and rendering its children with react.cloneElement and react.Children, enabling flexible cancel and save actions.

Explore an opinionated, starting-point folder structure for a React project, from api and assets to components, context, hooks, i18n, layout, services, store, and views.

Organize route components by feature, placing product-related files under a products directory to improve maintainability, and define routes as children with dynamic ids for products.

Encapsulate related components and logic by adopting a feature-based structure that places the product form, its helpers, and services inside a single product feature directory, improving reuse and maintainability.