Forms are a common interaction method in user interfaces, and validating/managing their state can be challenging. In the React ecosystem, React Hook Form package name: react-hook-form is a powerful solution for complex form management. To use it flexibly and appropriately, this guide summarizes common scenarios, usage patterns, easily overlooked points, and core principles. Please provide feedback if there are any omissions.
Mar 31, 2025
Click-to-component is a React component that enables one-click navigation to source code, significantly improving development efficiency. Here I attempt to read the source code and document key points. Source Code Structure The project uses pnpm as the package management tool, with pnpm workspace managing multiple packages.
Dec 31, 2024
In actual development, finding code often involves copying styles or text from the browser and searching in the IDE. Can I directly click any element on the page and jump to open the corresponding code file in the IDE? click-to-component is such a tool.
Dec 26, 2024
In web page interactions, forms are common elements. For form validation/management, react-hook-form is a commonly used and excellent helper library. For example, useFieldArray is used for managing array values, and formContext is used for complex nested component forms. Understanding these usage patterns helps you use it more effectively.
Dec 6, 2024
This post introduces how to use monaco-editor, covering installation, Webpack bundling, and related references.
Jul 9, 2023
This article introduces refs in React, including their advantages, implementation details, and relevant resources. These steps can help improve efficiency when working with refs in React.
Mar 1, 2022
This article introduces the usage of react-window, including its advantages, implementation details, and relevant resources. These steps can help improve efficiency when working with react-window.
Jan 30, 2022
This article discusses online issue - rendering anomalies, including usage scenarios, implementation details, etc., to improve efficiency in handling rendering anomaly problems.
Aug 15, 2021
This article introduces the react/display-name rule, including its advantages, implementation details, and related resources. These steps can help developers improve efficiency with react/display-name.
Jul 25, 2021
本文介绍了解redux-duck，包括使用场景、实现细节等，以提高了解redux-duck的效率。
Jun 20, 2021
What yield and yield* do in generators, how they differ, and when to use each, with examples.
Jan 15, 2021
Reducing unnecessary renders in SPA apps with React (and similar frameworks), including strategies, pitfalls, and examples.
Dec 8, 2020
This article discusses the limitations of React's componentWillUnmount lifecycle method, including its advantages, implementation details, and relevant resources to help developers understand and work around these constraints.
Dec 5, 2020
React Error Boundaries: what they solve (UI exceptions), what they don’t (non-UI errors), and how to use them in practice.
Oct 4, 2020
This article introduces the deprecated componentWillReceiveProps, including usage scenarios and implementation details, to improve efficiency in understanding the deprecated componentWillReceiveProps.
Jun 15, 2020
This article introduces the react-intl v3 upgrade, including its advantages, implementation details, and relevant resources. These steps can help improve efficiency when upgrading to react-intl v3.
Jun 13, 2020
This article introduces improving Redux Saga error readability, including usage scenarios and implementation details to enhance Redux Saga error readability efficiency.
May 1, 2020
Shows how to toggle global loading masks at the saga layer, wrap effects with middleware, and avoid repetitive spinner code.
Apr 15, 2020
This post translates and discusses naming conventions for event handlers in React, with practical guidance and references.
Apr 11, 2020
This post describes upgrading a React project, including motivations, key areas, issues, and package versions.
Mar 23, 2020
Discusses the pitfalls of deep-cloning Redux state, compares cloneDeep, clone, and JSON techniques, and offers guidance on safer reducer patterns.
Mar 7, 2020
Explores turning saga-driven actions into Promises, evaluates existing approaches, and shares notes on the redux-saga-promise helper.
Feb 2, 2020
This article explores the implementation of global exception interception and customized error handling in Axios. Through the combination of Axios interceptors and Redux-Saga, it resolves the conflict between global interception and customized handling, achieving unified processing of common exceptions and personalized error handling for specific requests, improving the efficiency and flexibility of frontend exception handling.
Dec 29, 2019
Breaks down takeEvery, takeLeading, and takeLatest with behavior notes, logs from experiments, and guidance on when to use each helper.
Dec 28, 2019
This article introduces the read-only nature of React Props, including its advantages, implementation details, and relevant resources. These steps can help improve efficiency when working with React Props' read-only nature.
Dec 22, 2019