How To Dev

Introduction React Fiber is the core reconciliation engine of React supported since version 16, helping to change the rendering mechanism from synchronous to asynchronous. Advantages: Ability to pause and resume work: Allows React to break the rendering process into small units of work (fibers) so as not to block the main thread. Task prioritization: Prioritizes direct user interactions (keystrokes, clicks) over background data processing tasks. UX Improvement: Minimizes lag (jank) when the application has to handle complex UI components or large data lists. Detailed Workflow React Rendering Pipeline Trigger Phase When you call setState() or dispatchAction, React marks the changed nodes as dirty and uses the lane mechanism to mark upwards to the corresponding parent Fiber Nodes. Fiber: Acts as a "unit of work." Each component is a Fiber node containing information about state, props and links to parent/child/sibling nodes. Render Phase - Calculation This is where Reconciliati...

Introduction Vitest is a modern testing framework built on Vite. It boasts incredibly fast execution speed by leveraging worker threads, perfect compatibility with the Jest ecosystem (in terms of syntax and API), and excellent support for TypeScript/JSX without complex configuration. In this article, I will guide you on writing unit tests, component tests, and integration tests. Unit Test: Checks independent functions or logic to ensure they work correctly with different inputs. Component Test: Checks the user interface and interactions of individual components. Integration Test: Checks the coordination between multiple components or between the client and the API (often mocked) to ensure smooth business logic flow. Prerequisites This article is implemented on a NextJS project, please initialize a project before continuing. Detail I will continue using content from the Demo AI Agent article to write tests for it, but will need to refactor the code to better support testing as follows: ...