React.js

What?

by Kent C. Dodds (opens in a new tab)

Some Basic Concepts

Create React App (CRA)
JSX (JavaScript Syntax Extension) (opens in a new tab)
React Components #CamelCase #reusableUI (opens in a new tab)
- Functional Components #stateless (const CompName = () => { return (<> </>)}) (opens in a new tab)
- Class based components #stateful #stateRender (opens in a new tab)
React Props (opens in a new tab) vs React State & setState #built-inReactObject #async #异步 (opens in a new tab)
- What is the difference between props and state? (opens in a new tab)
Conditional Rendering #logical #ternary #switch #IIFE (opens in a new tab)
Component Life Cycles #4stages (lifecycle methods) #clc (opens in a new tab)
React Keys & React Map List (opens in a new tab)
Composition (opens in a new tab) vs Inheritance
- Composition (What they do)
  - 像 tag 组合
  - More flexible (predict future usage)
  - Reusable
  - Use of Closure
  - Don’t need to duplicate logic
- Inheritance (What they are)
  - 像分类归类

Some Advanced Topics

What React Ecosystem (Tools) ?

React Routers
- Tanstack Router (React Location) (opens in a new tab)
- React Router v6 (opens in a new tab)
- Reach Router
SSR (Server Side Rendering) 服务端渲染 #htmlOnRequest (opens in a new tab)
- Next.js #vercel #ssr (opens in a new tab)
- Remix (opens in a new tab)
- After.js
- Rogue
SSG (Static Site Generation) 静态生成 #seo (opens in a new tab)
- Next.js #vercel #ssr (opens in a new tab)
- Gatsby
React API calls
- ReST API (ReSTful APIs microservices) (opens in a new tab)
  - fetch() #async (network requests) (opens in a new tab)
  - SuperAgent
  - Axios (opens in a new tab)
  - superagent
- GraphQL (opens in a new tab)
  - Apollo #GraphQL (opens in a new tab)
  - Relay Modern
  - urql
- use-http
- Other data Fetching (Official Comparison 🔗 (opens in a new tab))
React Testing (opens in a new tab)
- Rendering component trees
  - Unit Testing
    - Jest #unit #testRunner (opens in a new tab)
    - Vitest #testRunner (opens in a new tab)
    - Mocha #testRunner #testFramework
    - Chai #assertionLibrary
    - React Testing Library (RTL) #testingLibrary (opens in a new tab)
    - Enzyme #testingLibrary (opens in a new tab)
    - Sinon #testingPlugin
    - AVA
    - Tape
  - Integration Testing
    - Karma #testRunner
  - Component Tools
    - Storybook (opens in a new tab)
    - Ladle #uber (opens in a new tab)
- Running a complete app
  - E2E (End-to-end) 端到端测试 Testing/Acceptance/functional testing (opens in a new tab)
    - Playwright #e2e (opens in a new tab)
    - Selenium (opens in a new tab) , Webdriver
    - [Cypress (opens in a new tab) #e2e #testRunner #framework](https://www.notion.so/Cypress-e2e-testRunner-framework-eca1daaba39f4423bfca6e7e5164a447 (opens in a new tab))
    - Puppeteer #library
    - Cucumber #Gherkin #BDD (opens in a new tab)
    - Nightwatch.js
React State Management
1. Component State
2. Application State (Client State) (opens in a new tab)
  1. Local State
    - Component State/Context API
  2. Global State (multiple components)
    - Context (opens in a new tab) / State (opens in a new tab) (use State & useState FIRST)
      - Why didn't useState work? 🔗 (opens in a new tab)
        
        I need a global ⇒ Jotai #atom #immutableState #autoRender #midLargeApp (opens in a new tab)
        
        specify which atom gets re-render
        
        I want to mutate ⇒ Valtio #mutableState #autoRender #proxy #smallApp (opens in a new tab)
        
        I need a store/machine (actions, events etc) ⇒ Zustand #immutableState #manualRender #flux #largeApp #context #outSideReact (opens in a new tab)
      - Data-centric #externalStore (react components are used to represent those data)
        
        Zustand #immutableState #manualRender #flux #largeApp #context #outSideReact (opens in a new tab)
        
        Where state resides
        
        module (outside react)🔗 (opens in a new tab)
        
        How to control re-render
        
        selector (ref equality check)🔗 (opens in a new tab)
        
        Zustand uses flux pattern and is suitable for mostly large scale apps. It is an alternative for Redux. 🔗 (opens in a new tab)
        
        A big advantage of zustand is the ability to synchronously update state from outside of components. 🔗 (opens in a new tab)
        
        I prefer Zustand. Tiny, straightforward, scalable. 🔗 (opens in a new tab)
        
        I use Zustand and Jotai. I would also use both in the same application since they are based on different state management models. I don't use Valtio because I try to avoid proxy-based reactivity in React. 🔗 (opens in a new tab)
        
        top-down 🔗 (opens in a new tab)
        
        top-down you would model your state as a larger object with some smaller nested objects, then the selector would be responsible for subscribing only to the smaller nested pieces that the component needs. 🔗 (opens in a new tab)
        
        better for modeling the app domain, 🔗 (opens in a new tab)
        
        zustand for centralised javascript stores. if you have a state schema, or your state is json, this will make sense. works well in teams. 🔗 (opens in a new tab)
        
        Valtio's premise is to have global mutable objects. When used in components, the component is automatically re-rendered when the value changes. It works great, but it may cause some hard-to-track bugs when used without discipline in large projects. Zustand is very strict, and this is great for large projects, particularly enterprise ones. 🔗 (opens in a new tab)
        
        Valtio #mutableState #autoRender #proxy #smallApp (opens in a new tab)
        
        (react-tracked + Zustand #immutableState #manualRender #flux #largeApp #context #outSideReact (opens in a new tab))
        
        How to control re-render
        
        Usage tracking (with proxies)
        
        Where state resides
        
        Module (outside react)
        
        Valtio uses proxy pattern, is mutable, and mostly suitable for small scale apps. It is an alternative for Mobx. 🔗 (opens in a new tab)
        
        Valtio mostly optimizes for state writing by allowing you to directly mutate the global state. To me it's similar to Zustand, except that state updates are made simpler. 🔗 (opens in a new tab)
        
        Valtio good for a global state that's detached from React component tree. 🔗 (opens in a new tab)
        
        it's best in large data-centric applications 🔗 (opens in a new tab)
        
        valtio is fantastic for smaller projects that have no problem with mutation and updating state from multiple place. works best in everything you do personally. 🔗 (opens in a new tab)
      - Component-centric (React Centric) #internalStore (Design components first)
        
        Jotai #atom #immutableState #autoRender #midLargeApp (opens in a new tab)
        
        How to control re-render
        
        Dependency tracking without proxies
        
        Where state resides
        
        Component (inside react)
        
        middle-large scale apps. It is an alternative for Recoil or useContext/useState.🔗 (opens in a new tab)
        
        for smaller application / personal projects
        
        bottom-up 🔗 (opens in a new tab)
        
        it's trivial to subscribe to only the state you use, but it's more work to combine that state into a cohesive whole. The selectors are often used to combine smaller atoms into an object with the state that's meant to go together. 🔗 (opens in a new tab)
        
        better for performance-driven apps that have many moving parts that require a large amount of read-write operations to small pieces of state. 🔗 (opens in a new tab)
        
        I think the atomic pattern can accomplish everything zustand can, but more, and with less boilerplate. 🔗 (opens in a new tab)
        
        jotai for atomic, dispersed state bits, similar to useState but render optimised and with a few extras (state derivatives). works well in teams. 🔗 (opens in a new tab)
3. Server State (Server Cache) (opens in a new tab)
4. URL State
  1. Tanstack Router (React Location) (opens in a new tab)
- Other state managers
  - MobX #proxy
    - top-down [🔗](https://www.reddit.com/r/reactjs/comments/wec4oo/zustand_vs_jotai_vs_valtio_which_state_management/#:~:text=what%20I've%20experienced%2C-,top-down,-(Zustand%2C%20Redux%2C%20Mobx) (opens in a new tab)
  - Recoil #state #meta #atom (opens in a new tab)
    - Bottom-up [🔗](https://www.reddit.com/r/reactjs/comments/wec4oo/zustand_vs_jotai_vs_valtio_which_state_management/#:~:text=the%20state%20structure.-,bottom-up,-(Jotai%2C%20Recoil%2C%20hookState) (opens in a new tab)
    - dependency tracking without proxies
    - state resides in component (inside react)
  - Async actions (Side Effects)
  - Redux Thunk
  - Redux Better Promise
  - Redux Saga
  - Redux Observable
  - Helpers
  - Rematch
  - Reselect
  - Data persistence
  - Redux Persist
  - Redux Phoenix
  - Redux Form
  - react-tracked
  - XState
React Form Component (opens in a new tab)
- React Hook Form (opens in a new tab)
- Formik #form (opens in a new tab)
- Final Form
- Downshift #autocomplete (opens in a new tab)
- Validation
  - Yup (opens in a new tab) or Zod #run-time (opens in a new tab) , hookform/resolvers
- Input: React IMask (opens in a new tab), React-number-format (opens in a new tab), React Credit Cards (opens in a new tab)
- React Calendar Component (opens in a new tab)
  - React-calendar (opens in a new tab)
React Styling
- Styled
- Unstyled (Headless UI (opens in a new tab))
- CSS Frameworks
  - React-Bootstrap (opens in a new tab)
  - Bootstrap (Bootstrap5) (opens in a new tab)
  - Tailwind CSS (opens in a new tab)
  - Bulma - don’t come with js framework components by default
React Mobile
- React Native (opens in a new tab)
- Cordova/PhoneGap

What are the Rules?

Never Mutate The State with = sign #react #rule (opens in a new tab)

Why?

Why React?

How?

How to optimize?

Optimize Re-renders (opens in a new tab)
- How can you optimize performance for a function component that always renders the same way? (opens in a new tab)
1. Lazy Loading: Lazy loading is a technique that allows you to load certain components or modules only when they are needed. This can help to reduce the amount of initial code that needs to be loaded and can also help to reduce the overall size of your JavaScript bundle.
2. Use Memoization: Memoization is a technique that allows you to cache the results of expensive function calls. This can help to reduce the amount of time that your application spends recalculating values and can improve overall performance.
Optimize System (opens in a new tab)
- Restructure code
- SRP (Single-responsibility principle) 单一职责原则 #modules (opens in a new tab)

Use Production Builds: When deploying your React application, make sure to use a production build. This will reduce the size of the JavaScript bundle and enable optimizations such as minification, which can significantly improve performance.
Code Splitting #modular #modularizing (opens in a new tab)
Use Virtual DOM: React uses a virtual DOM to manage updates to the UI. By using a virtual DOM, React can update the UI more efficiently and can help to improve performance.
Use React Profiler: React Profiler is a built-in tool that can help you to identify performance bottlenecks in your application. By using React Profiler, you can identify which components are causing performance issues and take steps to optimize them.
Use Performance Budgets: Setting performance budgets can help to ensure that your application remains fast and responsive. By setting budgets for things like load time and rendering performance, you can ensure that your application remains performant even as it grows in complexity.
Use Server-Side Rendering: Server-side rendering can help to improve the initial load time of your application and improve overall performance. By rendering your application on the server and sending the HTML to the client, you can reduce the amount of JavaScript that needs to be loaded and improve the time-to-first-byte.

Prisma Zettelkasten