[React] Debug Custom React Hooks With useDebugValue
React with debug Custom Hooks
2023-09-14 09:00:47 时间
The useDebugValue
hook will not effect your user experience but is instead aimed at improving the developer experience. When building your own custom hooks, useDebugValue
can help you debug the hook's internal logic by displaying values in the React Dev Tools.
The hook takes two arguments: a value to be displayed in the developer console and an optional function you can use to format the aforementioned value. The function signature looks like this:
const name = 'ryan' // Outputs 'ryan' to the developer console useDebugValue(name); // Outputs 'RYAN' to the developer console useDebugValue(name, (name) => name.toUpperCase());
相关文章
- React 初探
- [React Typescript 2022] Type a Radio Button Component in React using TypeScript
- [React] Use a lazy initializer with useState
- [Node.js] Mock an API for Local Development in React with Mirage JS
- [Functional Programming + React] Provide a reasonable default value for mapStateToProps in case initial state is undefined
- [React] Create and import React components with Markdown using MDXC
- [Redux] Generating Containers with connect() from React Redux (VisibleTodoList)
- [React Testing] className with Shallow Rendering
- react入门-组件方法、数据和生命周期
- 异形前端提效平台前传——预测React能活几年?
- [Tools] Nx workspace with React
- [React Testing] Use React Testing Library’s Wrapper Option to Simplify using rerender
- [React ARIA Testing] Test Accessibility of Rendered React Components with jest-axe
- [React Testing] Error State with React Testing Library, findBy*
- [React] Preload React Components with the useEffect Hook
- [PWA] Customize the Splash Screen of a PWA built with create-react-app
- [React] Extend styles with styled-components in React
- [React] Use React.memo with a Function Component to get PureComponent Behavior
- [React] PureComponent in React
- [Recompose] Configure Recompose to Build React Components from RxJS Streams
- [React Intl] Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber
- [React Intl] Render Content with Placeholders using react-intl FormattedMessage
- [React] Unit Testing with React and webpack
- [React] React Fundamentals: Component Lifecycle - Mounting Basics
- react-native新导航组件react-navigation详解
- 【华为云技术分享】三大前端技术(React,Vue,Angular)探密(上)
- Taro React组件开发(8) —— RuiUploadImages 多图片上传组件【Promise.all 实现】