Posts Tagged #react
Every article on the Techalyst blog tagged with #react.
React Router: Routes, Params and Nested Layouts
React on its own has no concept of pages. The moment your app needs more than one screen with real URLs, back-button support, and shareable li...
Data Fetching in React with TanStack Query
Fetching data with useEffect works, but you end up writing the same things over and over: a loading flag, an error flag, a cleanup to ignore s...
Controlled vs Uncontrolled Components in React
Every form in React comes down to one question, and once you can answer it the rest falls into place: who owns the value in this input, React...
Memoisation in React: useMemo, useCallback and React.memo
React re-renders often, and that is fine, because a render is usually cheap. Memoisation is how you skip the renders and the calculations that...
useContext: Sharing State Without Prop Drilling
Prop drilling is the slow pain of passing a value down through layers of components that do not care about it, just to reach the one at the bo...
useReducer: Managing Complex State in React
useState is perfect for a few independent values. But when a component grows several pieces of state that change together, or transitions that...
Custom Hook Patterns and Best Practices in React
Writing a custom hook is easy. Writing one that stays clean as the app grows takes a few good habits. Rather than a list of tips, it helps to...
Custom Hooks: Extracting and Reusing Logic in React
The moment two components need the same stateful logic, fetching data, tracking the window size, a toggle with helpers, you feel the urge to c...
Props and Composition in React: children and Render Props
Components are only useful if they can talk to each other and slot together. React has a small, consistent set of tools for this: props send d...
The Rules of Hooks, and Why They Exist
There are two rules of hooks, and on first read they feel like arbitrary restrictions. Do not call hooks in conditions. Do not call them in lo...
Error Boundaries in React
By default, an uncaught error during rendering takes down your entire React app. One broken component throws, React unmounts the whole tree, a...
useState and How React Re-renders
useState is the first hook everyone learns, and on the surface it is simple: a value and a function to change it. What takes longer to click i...
useEffect: Effects, Cleanup and the Dependency Array
useEffect is the hook people reach for too often and understand too little. Its job is narrow: synchronise your component with something outsi...
State Management in React: Context, Redux Toolkit and Zustand
State management in React gets talked about as if you need a big library on day one. You usually do not. Most state is local and stays that wa...
useRef: DOM Access and Mutable Values in React
useRef looks like it does two unrelated things: it grabs DOM elements, and it stores a value that does not cause re-renders. They are actually...
Portals in React with createPortal
Modals, tooltips, and dropdown menus all share a problem: they need to break out of wherever they are declared in the DOM. A modal nested deep...
Immutable State Updates in React
One rule causes more "but I changed the state, why didn't the UI update" bugs than any other in React: never mutate state, always re...
Conditional and List Rendering in React, and Why Keys Matter
Two things show up in almost every component: deciding whether to show something, and rendering a list of things. React has no special templat...