随笔分类 - React
摘要：In React, every update is split in two phases: During render, React calls your components to figure out what should be on the screen. During commit, R
阅读全文
摘要：When you want a component to “remember” some information, but you don’t want that information to trigger new renders, you can use a ref. import { useR
阅读全文
摘要：Say we have code below in the application: const generateRandomColor = () => { let result = ''; for (let index = 0; index < 6; index++) { const [eleme
阅读全文
摘要：import React from 'react'; declare global { namespace JSX { interface IntrinsicElements { 'custom-element': { children?: React.ReactNode; title?: stri
阅读全文
摘要：Idea is put component props inside hook, and return from hook, that's way to keep component clean and simple Hook: import { MachineOptions } from "./m
阅读全文
摘要：// Doesn't work import React from 'react' import { saveInfo } from './api' export default function App() { const [count, setCount] = React.useState(0)
阅读全文
摘要：https://bestofjs.org/projects/valtio Cool things about Valtio, it is completely independ from React component. It is self testable and hook with React
阅读全文
摘要：Imagine you make a super fancy input component as part of your design system. Imagine that a parent element (i.e. the component that renders the fancy
阅读全文
摘要：A new hook for version 18 of React is useId. Frequently in React you need unique identifiers to associate two objects together. An example of this wou
阅读全文
摘要：useLayoutEffect is almost the same as useEffect except that it's synchronous to render as opposed to scheduled like useEffect is. If you're migrating
阅读全文
摘要：import "./styles.css"; import React from "react"; import ReactDOM from "react-dom"; import { createMachine, assign } from "xstate"; import { useMachin
阅读全文
摘要：import React, { useState } from "react"; type Base = { id: string } | string; type GenericSelectProps<TValue> = { formatLabel: (value: TValue) => stri
阅读全文
摘要：https://github.com/kentcdodds/react-testing-library-course/commit/1148e920b8d055d9ca9ef1c372e233d2e950ff1f User-event: https://testing-library.com/doc
阅读全文
摘要：Let's say we have a simple app look like this: import { useEffect, useState } from "react"; function useFetch(config) { console.log("useFetch call");
阅读全文
摘要：Let say we have a simple counter app: import { useEffect, useState } from "react"; function useStopwatch() { const [count, setCount] = useState(0); us
阅读全文
摘要：AtomFamily For example, you have list of elements. We want to avoid that single elemenet got changed, whole list got re-render. Also want to share the
阅读全文
摘要：Using cache class to reduce API calls import {Button} from '@chakra-ui/button' import {Input} from '@chakra-ui/input' import {Box, Divider, Heading, V
阅读全文
摘要：interface: export type ElementStyle = { position: {top: number; left: number} size: {width: number; height: number} } export type Element = {style: El
阅读全文
摘要：import {ErrorBoundary, FallbackProps} from 'react-error-boundary' const userState = selectorFamily({ key: 'user', get: (userId: number) => async () =>
阅读全文
摘要：You can use generics in React to make incredibly dynamic, flexible components. Here, I make a Table component with a generic 'items' type. interface T
阅读全文
