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.
A link is a declaration: the user clicks, and the router navigates. But not every navigation is a click. A form submits, a login succeeds, an OAuth callback lands, a timer fires, and the application must move the user to a different route without a link in sight. Programmatic navigation is the imperative side of…
A route that renders a component is a route that anyone can visit. Real applications need more: a page that only authenticated users can see, a section that only administrators can enter, a nested layout that wraps a group of related pages. React Router provides the building blocks for all three. A protected route wraps…
A React application that fetches data from a server needs more than fetch and useState. It needs caching, deduplication, background refetching, and a consistent way to handle loading and error states. TanStack Query is the library that provides all of these, and the QueryClient is the object that holds the cache and the configuration. The…
The useQuery hook is the entry point to every data-fetching component in a TanStack Query application. It takes a query key, a query function, and a set of options, and it returns the data, the loading state, the error state, and a set of methods for refetching and cache manipulation. The hook handles the caching,…
A query reads data. A mutation writes it. The useMutation hook is the entry point for the create, update, and delete operations, and it is the counterpart of the useQuery hook. It takes a mutation function, it exposes the state of the operation, and it provides the callbacks for the side effects. The mutation does…
A global state that many components read and write needs a single source of truth, a predictable way to update it, and a way to connect the components to it. Redux provides the pattern, and Redux Toolkit provides the tooling that removes the boilerplate. The configureStore function creates the store, the Provider component makes it…
A Redux store is a single object, and the only way to change it is to dispatch an action. The action is a plain object with a type and an optional payload. The reducer is a pure function that takes the current state and the action, and returns the new state. The classic Redux required…
A Redux component does two things: it reads the state and it changes the state. The read is the useSelector, and the write is the useDispatch. The two hooks are the entire interface between the component and the store, and the way they are used determines whether the application is fast, predictable, and easy to…
A reducer is a pure function, and a pure function cannot fetch data, log to the console, or read the current time. The actions that produce those side effects must live somewhere else, and the middleware is the mechanism that sits between the dispatch and the reducer. The middleware sees every action, it can pass…
Zustand is a small state management library for React. It does not have a provider, an action type, or a reducer. The store is a hook that returns the state and the actions, and the components call the hook and read what they need. The state lives outside the React tree, and the components subscribe…