随笔分类 - React
摘要：Type helpers change the game when it comes to types in your codebase. They help TypeScript infer more from your code - and make your types a lot more
阅读全文
摘要：Source: https://javascriptpatterns.vercel.app/patterns/performance-patterns/route-based-splitting If you're using react-router for navigation, you can
阅读全文
摘要：Source: https://javascriptpatterns.vercel.app/patterns/performance-patterns/import-on-visibility One way to dynamically import components on interacti
阅读全文
摘要：Source : https://javascriptpatterns.vercel.app/patterns/react-patterns/compound-pattern A compound compoennt usage looks like this: import React from
阅读全文
摘要：Docs The name “SWR” is derived from stale-while-revalidate, a HTTP cache invalidation strategy popularized by HTTP RFC 5861. SWR is a strategy to firs
阅读全文
摘要：The Document is like the top level HTML structure of your Next.js application. You can use document to change the default language, set favicon; Becau
阅读全文
摘要：You can override the default App component in Next.js by creating a _app.tsx file and defining your own App component. By doing this, you can use glob
阅读全文
摘要：The image component from Next.js comes with excellent performance optimizations that make it worth using. It comes with improved performance, better v
阅读全文
摘要：Containerization of State within Child React Components The changing of state is the reason why components re-render. If you lift all of your state up
阅读全文
摘要：Sometimes one line of code can eliminate 50% of your bundle size. As you'll see in this video, we can remove "dead code" from modules we are working w
阅读全文
摘要：Config store app/store.ts import { configureStore } from "@reduxjs/toolkit"; export const store = configureStore({ reducer: {} }); main.tsx import Rea
阅读全文
摘要：This lesson demonstrates that you can get a small performance gain by removing AJAX calls that feed into redux from the react/hooks lifecycle. In this
阅读全文
摘要：import React from "react"; import { motion } from "framer-motion"; const svgVariants = { start: { opacity: 0, pathLength: 0 }, finished: { opacity: 1,
阅读全文
摘要：Presnetational Component: A presentational compoentn receives its data through props. It's primary function is to simply display the data it receives
阅读全文
摘要：For older applications, it's likely that you have some Class components. TypeScript works a little differently with these. The React.Component class i
阅读全文
摘要：Our Radiocomponent file contains several compound components to create a related group of radio inputs. The RadioGroupContext is receiving a type of a
阅读全文
摘要：Type useMemo: let rowArray = React.useMemo<null[]>( () => Array(board.rows).fill(null), [board.rows] ); Type useCallback: let getColumnArray = React.u
阅读全文
摘要：We are going to start refactoring our CountDisplay component. It is a small stateless component but it has a few props that can benefit from type safe
阅读全文
摘要：Replace Legacy Root API with New Root API ReactDOM.createRoot(document.getElementById("root")).render(<App />); Use React 18's New Root API Alongside
阅读全文
摘要：In this lesson we take all of the hooks and logic from our <ExchangeRate> component and put them into a custom hook called useCurrencyCodes(). What's
阅读全文
