Here I want to give you a brief overview of starter kits for a new React project. I want to reflect on advantages and disadvantages, on the skill-level needed as a developer, and on what features each starter project has to offer for you as a React developer. At the end you will know about 3 solutions for different requirements. A bit of context on why I write this guide now: The new React documentation has been released, which sunsets create-react-app (CRA) as the recommended way to start a React application, and instead recommends several starter kits which in their sum were not perfectly well received by the React community (A, B, C, D, E, F, G). For many it seemed too much influenced by politics [0], too heavy on (meta) framework lock-ins [1], too focused on SSR [2], and too far away from the problems a normal tech worker faces in their daily work outside of the bleeding edge Twitter bubble [3]. More about this below, but first my list of recommended React starter projects ... Disclaimer: From an individual developer's perspective, I am all-in with the framework/SSR agenda which the React team pushes in their new documentation. However, I feel like this recent announcement puts React beginners (from my educational perspective) and companies who want to adopt React (from my freelance perspective) in a bad position. Hence I want to give them more diverse options as escape hatch here. React with Vite Vite is the clear successor of create-react-app (CRA), because it does not much deviate from it.…

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…

Preface this article shows you how to use React and DOM things to achieve a compelling interactive hover box effect. By hovering over the mouse, the box will randomly change the color and display shadows, adding dynamic and visual appeal to the page. Read this article and you'll learn how to use React to implement event handling and dynamic styling, bringing more interesting interactions to your Web application. scene in modern Web applications, interactivity and dynamic effects are critical to improving the user experience. Hovering effect is a common way of user interaction, when the user hovers the mouse over a specific area, the relevant elements will change to attract the user's attention. In this article, we will explore how to use React to implement a CSS special effect of a hover square effect. Let's take a look at → Development first, import React and some necessary hook functions, as well as the stylesheet we will use in the component. As follows: import React, { useEffect, useRef, useState } from 'react'; import './index.less' The code for the index.less file is as follows: .App { background-color: #111; display: flex; align-items: center; justify-content: center; overflow: hidden; margin: 0; } .container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; max-width: 600px; overflow: hidden; } .square { background-color: #333; box-shadow: 0 0 2px #000; height: 16px; width: 16px; margin: 2px; transition: 2s ease; } .square:hover { transition-duration: 0s; } then defines an array of colors and a constant SQUARES to set the number of squares. As follows: const colors = ['#861104', '#7611a0', '#127ec7',…