A JavaScript library for building user interfaces, developed by Meta. It lets you compose UIs from reusable components, manage state declaratively, and update the DOM efficiently through a virtual representation. React is the foundation of countless web applications and the entry point to the modern front-end ecosystem.
CSS Modules solve the oldest problem in CSS at scale: every class name is global. A .button class defined for one component applies to every element with that class across the entire application, and the only defenses are naming conventions like BEM or heavy-handed specificity. CSS Modules change this by making class names local by…
Tailwind CSS v4 changed the setup story completely. In v3, a React project needed tailwind.config.js, postcss.config.js, and three @tailwind directives in the CSS file. In v4, none of that is required. The framework ships a first-party Vite plugin (@tailwindcss/vite) that handles CSS processing natively, eliminates PostCSS from the pipeline, and replaces the configuration file with…
CSS-in-JS libraries solve a problem that plain CSS and CSS Modules do not: they let styles depend on JavaScript values—props, state, theme context—without generating an explosion of class names or requiring inline style objects. The two dominant libraries in this space are styled-components and Emotion. They share the same core idea: you write CSS in…
Forms are where React’s rendering model meets the messy reality of user input, and React Hook Form (RHF) has become the default library for handling that intersection. Its core insight is architectural: instead of storing every keystroke in React state and re-rendering the entire form, RHF registers inputs as uncontrolled components and uses refs to…
Zod is the schema validation library that has become the default companion to React Hook Form. Its role is to define the shape of your form data once—as a TypeScript-first schema—and let both the form and the rest of your application share that definition. The integration point is zodResolver from @hookform/resolvers, which translates Zod’s validation…
A React application’s JavaScript bundle grows with every feature, every third-party library, and every route. The bundle that was 200 KB at the MVP stage becomes 2 MB after a year of additions, and the user who only wants to view their profile is downloading the admin dashboard, the rich text editor, and the entire…
A loading state is not a spinner. It is a contract between the application and the user: the application has accepted the request, is working on it, and will show the result as soon as it is ready. The traditional way to implement this contract is a boolean flag—const [isLoading, setIsLoading] = useState(true)—checked at the…
React’s rendering process is a synchronous, recursive operation. When a component throws during render, React cannot simply catch the error and continue—the component tree may be in an inconsistent state, with some components mounted and others not, some hooks already called and others not. In React 15 and earlier, this inconsistency would corrupt React’s internal…
The render props pattern is a technique for sharing code between React components using a prop whose value is a function. A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic . The component owns the state and behavior; the caller…
A Higher-Order Component is a function that takes a component and returns a new component. That is the entire definition. The function wraps the input component in a container, injects additional props or behavior, and returns the wrapper. The original component is not modified—it is composed inside the wrapper . This is the pattern that…