React Using React Router v6 for Private and Public Routes with Access Validation Mastering useReducer for Complex State Management Stop Comparing Web Components to React: The Trap of Library-Centric Criticism Understanding how React handles input state: A deep dive React State Management: A Guide 2023 Separating Business Logic from UI Components in React 18

A Guide to Passing Data Using Props in React Making Sense of React Server Components Why does React re-render and when do we need to worry about it? waku — The Minimalist React Framework With Server Components Next.js vs. Gatsby: Comparing React frameworks Server-Side Rendering (SSR) with Bun and React

Meet Codux: The React Visual Editor That Improves Developer Experience Security: How to deal with CSP in React Build a Lightweight Collapse Component in React How well should I know React before applying to my first job? Optimistic UI: Enhancing User Experience in React with React Query Bootstrap with React: The Complete Guide

Hello, everyone. I'm Carson. the following React component code uses three use keywords. Do you understand their role? 'use client' function App() { using data = use(ctx); // ... } it is true that I haven't written React for several days, and I can't even understand the grammar. This article will talk about the respective meanings of these use keywords. use client begins with the 'use client' declaration at the top of the code, which is used in a manner similar to the strict mode declaration: 'use strict'; // here is the JavaScript code in strict mode The 'use client' declaration is defined in the RSC ( React Server Component , server-side component) protocol. the React application of RSC is enabled. All components are rendered on the server by default (you can experience it through Next v13 ). Only component files that declare 'use client' are rendered at the front end. suppose our React application component structure is as follows, where red represents server component , blue represents client component (declare 'use client' ): then when the application is packaged, the D and E components will be packaged into separate files. On the front end, React can render A, B, C components directly. But for D and E, you need to request back the component code in the form of JSONP before rendering. using keyword then comes the using keyword before the data variable: using data = use(ctx); The using keyword is proposed by tc39 proposal ECMAScript Explicit Resource Management , and is used to provide unified lifecycle management (when…

May 30th is the 10th anniversary of React . I pulled React the latest code, and it doesn't matter. There are already 22 hook . where: react package exports 21 react-dom package exports 1 ( useFormStatus ) this article will talk about the role of React from the perspective of the development of hook over the years. the change of times up to now, the development of React has mainly gone through three periods: CSR period (client rendering period) concurrent period RSC period (server component period) the current 22 hook are also the products of these three periods. CSR period back in 2013, in order to solve the increasingly complex interactions of facebook , jordwalke developed React . After a period of exploration, React gradually formed a set of development mode that satisfies CSR . this development model migrates from ClassComponent to FunctionComponent , resulting in the first batch of hook . These hook are all related to the development mode of CSR . For example: related to the flow of states: useState useReducer useContext related to side effects of treatment: useEffect useLayoutEffect related to improving the degree of freedom of operation: useRef related to performance optimization: useMemo useCallback related to debugging: useDebugValue with the continuous iteration of React , several hook are introduced. In essence, they all aim to improve the development model of CSR and supplement or restrict the existing hook capabilities: useImperativeHandle (control useRef to prevent it from getting out of control) useEffectEvent (a supplement to useEffect capabilities) useInsertionEffect (supplement to useEffect scenarios) useMemoCache (reduce the mental…

1 useUpdate how do I force a component to refresh in a react function component? Although react does not provide a native method, we know that when the state value changes, the react function component will be refreshed, so useUpdate takes advantage of this. The source code is as follows: import { useCallback, useState } from 'react'; const useUpdate = () => { const [, setState] = useState({}); return useCallback(() => setState({}), []); }; export default useUpdate; you can see the return value function of useUpdate, which calls setState with a new object each time, triggering the update of the component. 2 useMount although the react function component does not have the life cycle of mount, we still have this requirement, that is, the requirement of executing once after the component is rendered for the first time can be encapsulated by useEffect. If you only need to set the dependency to an empty array, then you can only perform a callback after the rendering is completed: import { useEffect } from 'react'; const useMount = (fn: () => void) => { useEffect(() => { fn?.(); }, []); }; export default useMount; 3 useLatest react function component is an interruptible, repeatable function, so every time there is a change in state or props, the function will be re-executed. We know that the scope of the function is fixed when the function is created. If the internal function is not updated, then the external variables obtained by these functions will not change. For example: import React, { useState, useEffect } from 'react';…

what is useEffect? official explanation: useEffect is a React Hook that allows you to synchronize components with external systems. What does mean? Personal understanding is that it can be executed at different times according to different dependent values or return values. Let's talk about the first usage first 1: trigger update in useEffect example 1: when we do something automatically in the process of component creation, we can do this in functional components error example import { useEffect } from 'react' function App () { const [ count , setCount] = useState(0) useEffect(()=> { initData() }) const initData = () => { setCount(count + 1) } return ( <div> {count} </div> ) } what problems will you find if you use useEffect like this? when our component finishes rendering to execute useEffect, call the initData function to trigger the update through the setCount setting value. Once the update useEffect is executed at the end of the rendering, it becomes endless loop . so you should write this, passing in the empty array of the second parameter useEffect, which means that the component is only executed once in the rendering process correct example import { useEffect } from 'react' function App () { const [ count , setCount] = useState(0) useEffect(()=> { initData() }, []) const initData = () => { setCount(count + 1) } return ( <div> {count} </div> ) } 2: repeated useEffect in usage 2 example 2: what will it do if you write multiple useEffect in the process of component rendering? import { useEffect, useState } from…

Today, I will introduce several React hooks , which are not commonly used, but are very useful. useSyncExternalStore listen for external data changes external data sources need to provide a subscription function, and this function needs to return the method of unsubscribing import React from 'react'; import { store } from './store.js' export const App () { const data = useSyncExternalStore(store.subscribe, store.getData) return <> <button onClick={store.add}>add+</button> {data} </> } // store.js let conut = 0; let listeners = []; export const store = { add () { count ++; }, subscribe(listener) { listeners = [...listeners, listener]; return () => { listeners = listeners.filter(l => l !== listener); }; }, geetDate () { return count; } } useId generate globally unique ID, give up Math.random () bar import { useId } from 'react'; function App() { const uuid = useId(); return ( <>{uuid}</> ); } useLayoutEffect trigger before layout update import { useState, useRef, useLayoutEffect } from 'react'; function Tooltip() { const ref = useRef(null); const [tooltipHeight, setTooltipHeight] = useState(0); useLayoutEffect(() => { const { height } = ref.current.getBoundingClientRect(); setTooltipHeight(height); }, []); return <></> } useDeferredValue UI defer updates without handwritten anti-shake function import SearchResults from './SearchResults.js'; export default function App() { const [query, setQuery] = useState(''); const deferredQuery = useDeferredValue(query); return ( <> <label> Search albums: <input value={query} onChange={e => setQuery(e.target.value)} /> </label> <Suspense fallback={<h2>Loading...</h2>}> <SearchResults query={deferredQuery} /> </Suspense> </> ); } useReducer customize a lightweight redux const initialState = {count: 0}; function reducer(state, action) { switch (action.type) { case 'increment': return {count: state.count + 1}; case 'decrement': return {count:…

We know that useMemo and useCallback are mainly used to cache intermediate states and reduce meaningless render to improve performance. But recently I have found that I have been misunderstanding their use! misunderstanding of useMemo Please take a look at the following code. Even with useMemo , the second subcomponent is re-rendered without the change of isZero ! import { useCallback, useMemo, useState } from "react"; const Child = ({ value, onClick }) => { return ( <div style={{ height: 100, background: `#${(~~(Math.random() * (1 << 24))).toString(16)}` }} > my value is {value.toString()} </div> ); }; export default function App() { const [count, setCount] = useState(0); const isZero = useMemo(() => !!(count % 3), [count]); const onClick = useCallback(() => setCount(count + 1), [count]); return ( <div className="App"> <button onClick={onClick}>click me</button> <Child value={count} /> <Child value={isZero} /> </div> ); } 💡 related reading in fact, the reason has also been mentioned in previous articles: React every time the state of a component changes, it starts from the current component until all leaf node components are re-rendered. The article also mentions the solution to this problem: the subcomponent is wrapped with the memo function, and the component can render as expected. however, at this point we remove useMemo , and the subcomponents are still rendered as expected. memo is similar to useMemo , which is based on a shallow comparison of Object.is and is only valid for non-reference types. so in the above example, it makes no sense to use useMemo . misunderstanding of useCallback however, in the above example, the…

Please think about a question: if there is a HTML tag, and React has two hook around it, then this tag must be very important for the future development of React . Is that all right? The tag is-- form . React around form , there are two new hook : useOptimistic useFormStatus this article will talk about the layout and development of React around form . the development of Next.js speaking of the future development of React , we must start with Next.js . After all, React team members either join the Next team or are on their way. web the parts of development that involve front-end interaction mainly include: render the front-end page based on the back-end data Save data to the backend according to the input of the front-end user The development of Next.js mainly focuses on the above two points. render the front-end page based on the back-end data in the earlier stage, the main features of Next.js are SSR , SSG . That is, the process of rendering the front-end page based on the back-end data is moved from the front-end to the back-end. the Next.js route for this period is called Pages Router . time comes to Next.js v13 . App Router with RSC (React Server Component) as the core replaces Pages Router as the default configuration. many friends are not familiar with RSC and regard it as an experimental feature. In fact, RSC has landed via Next.js . one sentence understanding RSC -client components ( React components rendered in the browser) can be…