1 views collected around this technical thread.
This article explains the purpose of React's useEffect hook, details how dependency arrays control its execution timing, demonstrates cleanup functions, and provides practical code examples for handling side effects such as data fetching, timers, and event listeners.
This article explains when React's useEffect callbacks run—whether synchronously before rendering or asynchronously after rendering—by analyzing four demos, discussing the impact of event types, rendering workload, and React's internal scheduling rules.
React’s core fiber system traverses a depth‑first tree using performUnitOfWork, splits rendering into beginWork and completeWork, then commits in before‑mutation, mutation, and layout phases, while hooks like useState and useEffect are implemented via linked‑list queues that ensure deterministic updates and side‑effect handling.
This article explains the pitfalls of overusing the useEffect hook in React, demonstrates how to replace redundant effects with direct state calculations, memoization, and event‑handler logic, and provides practical code examples for improving performance and simplifying component design.
This article explains how React manages side‑effects with useEffect and useLayoutEffect, covering the underlying Effect data structure, the mount and update phases, the commit pipeline (before‑mutation, mutation, layout), and the differences in timing and execution between the two hooks.
This article provides in‑depth guidance on using React hooks such as useState, useEffect, useContext, useReducer, and related utilities, covering lazy initialization, functional updates, performance‑optimising patterns, state sharing strategies, and advanced techniques like useImmer and react‑tracked to reduce mental overhead and avoid bugs.
This article explains why asynchronous data fetching in React can cause race conditions that lead to flickering or mismatched content, and presents several practical solutions—including component remounting, data validation, cleanup effects, and request cancellation—to ensure reliable UI updates.
This article explains what race conditions are, demonstrates how they can occur in React components during asynchronous data fetching, and provides practical solutions using component lifecycle checks, boolean cancellation flags, the ahooks useRequest hook, and React Suspense to ensure correct UI updates.
Learn how to optimize data fetching in React by understanding initial vs on‑demand requests, avoiding waterfall patterns, leveraging Promise.all, parallel promises, data providers, and browser limits, while applying best practices for useEffect, lifecycle handling, and performance‑focused component design.
This article explains what race conditions are in front‑end web development, demonstrates the issue with a React demo fetching articles, and walks through step‑by‑step solutions using custom hooks, useEffect cleanup, and AbortController to safely cancel outdated requests and avoid stale data rendering.
This article explains why React introduced Hooks, how they solve state‑reuse and component‑complexity problems, details the internal fiber architecture behind useState, useReducer, useEffect, useLayoutEffect, useCallback and useMemo, and provides practical code examples for each.
This article explains how React's Strict Effects mode double‑invokes effects and layout effects during mount and unmount, and provides practical patterns using refs, cleanup functions, and focus management to ensure components behave correctly when effects run multiple times.
This article explains why React Hooks were introduced, walks through the fundamentals of useState and useEffect with clear code examples, and demonstrates how Hooks simplify state management, side‑effects, and component logic compared to traditional class components, enabling more maintainable frontend development.
This article explains the differences in execution timing between React's useEffect and useLayoutEffect hooks, analyzes their underlying mechanisms, demonstrates practical demos with performance monitoring, and delves into React's rendering process, scheduler, and related browser rendering concepts.
This article dissects the inner workings of React's useEffect hook by tracing its implementation through the React Fiber architecture, from mountEffect and updateEffect functions to the commit phase, revealing how side‑effects are scheduled, created, and cleaned up in modern React applications.
This article introduces the concept of React Hooks, explains the built‑in hooks such as useState, useEffect, useCallback, useMemo, useRef, and useContext, demonstrates their usage with complete code examples, and guides readers on creating their own custom hooks for reusable logic in functional components.
This article explains the evolution of React component reuse—from legacy mixins and higher‑order components to modern React Hooks—provides step‑by‑step implementations of custom hooks such as useLogTime, useFetchHook, useInterval and useImgLazy, and demonstrates how to apply them in real‑world production code for better performance and maintainability.
The article provides a comprehensive analysis of React Hooks, covering their injection model, persistent call ordering, debugging and testing strategies, API design considerations such as useReducer, Context Provider, useEffect, missing APIs, type handling, compilation optimizations, safety concerns, and the overall motivation behind moving from class components to hooks.