随笔分类 - React
摘要:Component: import React from 'react' function FavoriteNumber({ min = 1, max = 9 }) { const [number, setNumber] = React.useState(0) const [numberEntere
阅读全文
摘要:Epic: import { ofType } from 'redux-observable' import { of, concat, merge, fromEvent, race, forkJoin } from 'rxjs' const buildAPI = (apiBase, perPage
阅读全文
摘要:Let's say we are using 'React.lazy()' to lazy load some Router: const Home = React.lazy(() => import('./screens/home')) const User = React.lazy(() =>
阅读全文
摘要:Our <Query /> component is a render prop based component that the <User /> component uses. But because it doesn't render anything, we can actually jus
阅读全文
摘要:When you smart component need to handle server request, it would be good to make sure it won't send multi same request to the backend. For example a s
阅读全文
摘要:Dynamiclly create DOM element based on the value: function PokemonCollection({ as: As = 'ul', renderItem }) { return ( <As>{initialCollection.read().r
阅读全文
摘要:tail is a customization prop for SuspenseList. It works in tandem with revealOrder and has three options: undefined, collapsed, and hidden. These opti
阅读全文
摘要:Suspense can have an unfriendly learning curve.Components with suspended content need a component boundary.Resource reads can't happen in the same com
阅读全文
摘要:The useDeferredValue Hook gives us a way to hold onto a previous resource values while waiting for a new one. This is a more hands-on alternative to t
阅读全文
摘要:In this lesson, we create a custom hook that wraps the useContext hook and returns its value, as well as more useful error messaging if a context prov
阅读全文
摘要:Eager delay spinners are not a good user experience.They can make a snappy user interface feel slower. We want delay spinners to appear only after a p
阅读全文
摘要:Before: import React from "react"; // 1. Change this static import to a dynamic import, wrapped in React.lazy import PokemonDetail from "./pokemon-det
阅读全文
摘要:The cool thing about Next.js API routes is that we can directly consume the API endpoints from pages. SWR is a nice tool for handling data loading sta
阅读全文
摘要:Unfortunately, sometimes a server request fails and we need to display a helpful error message to the user. In this lesson we’ll handle a promise reje
阅读全文
摘要:No matter how hard you try, eventually your app code just isn’t going to behave the way you expect it to and you’ll need to handle those exceptions. I
阅读全文
摘要:Understanding the order in which React hooks are called can be really helpful in using React hooks effectively. This chart can be really helpful in un
阅读全文
摘要:React is really good at creating and updating DOM elements, but sometimes you need to work with them yourself. A common use case for this is when you’
阅读全文
摘要:Before: <body> <div id="root"></div> <script src="https://unpkg.com/react@16.12.0/umd/react.development.js"></script> <script src="https://unpkg.com/r
阅读全文
摘要:We will create animated Content Placeholder as React component just like Facebook has when you load the page. Key points: 1. For each elements on the
阅读全文
摘要:useState is typically simpler at first than useReducer (you can even implement useState using useReducer), but there's one scenario where useReducer i
阅读全文