This weekly report mainly summarizes the content from various sources
Technology#
What Even Are React Server Components#
React Server Components are React components rendered on the server, designed to reduce the network waterfall and create a fast, buildable, and maintainable user experience. They reduce the amount of JavaScript sent to the client and can be nested, reducing the number of requests needed. Server components look like regular React components but require additional instrumentation to work on the server. They do not solve all React problems and should only be applied to larger and more complex applications.
How to measure page loading time with Performance API#
The article explains how to measure page loading time using the Performance API and provides a JavaScript implementation example. The author also created an NPM package called "page-loaded-in" to help developers save time. When developing web-based projects, prioritizing performance is crucial to provide users with a seamless and efficient experience.
React reconciliation: how it works and why should we care#
The article discusses a mystery in the process of rendering React components. When conditionally rendering components, it may unmount and remount itself on every re-render, causing the loss of internal state. However, if multiple components use the same conditional rendering, React will re-render the original component instead of unmounting and remounting a new one. This behavior is due to React's reconciliation algorithm, which aims to efficiently update the DOM by modifying existing elements instead of adding or removing them. The article provides a detailed explanation of how the algorithm works and its impact on React development.
Tools#
will-this-react-global-state-work-in-concurrent-rendering#
Testing interrupt rendering and state branching in React concurrent rendering.
react-lifecycle-visualizer#
Visualize and log React rendering lifecycles.
recharts#
A redefined chart library built with React and D3.
Like this component-based approach, instead of passing in a large options object.
neon#
A library and toolchain for embedding Rust in Node.js applications and libraries.
Chat2DB#
A free and open-source multi-database client tool developed by Alibaba, supporting local installation on Windows and Mac, as well as server-side deployment and web page access.
Updates#
View Transitions API#
The View Transitions API provides a mechanism to easily create animated transitions between different DOM states while updating the DOM content in a single step.
https://github.com/vuejs/vitepress/pull/2347/files
Click on theme switch in Chrome.
https://deploy-preview-2347--vitepress-docs.netlify.app/