React

Terms:

• Virtual DOM, Fiber, Reconciliation
• Batching updates, Concurrent rendering, Transitions

Single Source of Truth

Since a equality (===) check is performed by react to identify a change, it is necessary to avoid complex props, ie. only pass a non-object, non-function values like a number, string, or boolean value as props.\

Special props:

• ref
• key
• children

While props are received by Parent Component, a Component may maintain its own internal State. While creating states make sure to avoid structure that may cause states to contradict. Also state updates are not deep-merged. so avoiding deeply nested state is a smart choice.

• State Co-Location
  Simply declare the State as close to where it's relevant as possible. This does not mean to wrap states in a context, as their primary purpose is to mitigate prop-drilling. The impurity generated by setting state getter & setters in context, may cause undiagnosable re-renders.

  Read more:
  https://kentcdodds.com/blog/state-colocation-will-make-your-react-app-faster,
  https://react.dev/learn/scaling-up-with-reducer-and-context,
  https://react.dev/learn/sharing-state-between-components

• State Composition

  • Group related state. If you always update two or more state variables at the same time, consider merging them into a single state variable.
  • Avoid redundant state. If you can calculate some information from the component’s props or its existing state variables during rendering, you should not put that information into that component’s state.
  • Avoid duplication in state. When the same data is duplicated between multiple state variables, or within nested objects, it is difficult to keep them in sync. Reduce duplication when you can.

  Read more: https://react.dev/learn/choosing-the-state-structure

• State Effects:
  Avoid setting state synchronously in an effect.

React with External Systems

React started out with a client-side library to be executed on the client-side with limited support for servers. But as it matured, React now boasts features like server-actions, streaming server-components, and more.

But nonetheless there needs to be a careful consideration when communicating beyond "react-land", and limit the render-cycles.

• event-listeners in useEffect: https://react.dev/learn/synchronizing-with-effects Issues:
  • Double render-pass
  • Suspense incompatible
• useSyncExternalStore: Issues:
  • Client immediately emits a store update before hydration completes.
  • Triggers a non-concurrent synchronous (as the name implies) blocking render
    • https://tkdodo.eu/blog/avoiding-hydration-mismatches-with-use-sync-external-store
    • https://kurtextrem.de/posts/react-uses-hydration

Cross-environment Communication

There is no for Server technologies for the Web. The only way RSC (React Server Components) work is if the bundler/packager has support for them, making them a "syntactic sugar", just like async-await or classes for javascript.

• Server Components
  An 'async' component that can await before rendering, and are only triggered during build-time or on server during page request. Eg.

  async function Page({ page }) {
    // NOTE: loads *during* render, when the app is built.
    const content = await file.readFile(`${page}.md`);
  
    return <div>{sanitizeHtml(marked(content))}</div>;
  }

  Read more: https://react.dev/learn/creating-a-react-app#full-stack-frameworks

  Server Components are not sent to the browser, only the rendered output is visible to the client. To interactive APIs like useState, the need to be composed with Client Component using the use client directive.
  React context is not supported in Server Components.
  Server Components do support Suspense. Read more: https://react.dev/reference/rsc/server-components#async-components-with-server-components

  There is no directive for Server Components.

• Server Functions
  Server Functions allow Client Components to call async functions executed on the server. Eg.

  function EmptyNote() {
    async function createNoteAction() {
      // Server Function
      "use server";
  
      await db.notes.create();
    }
  
    return <Button onClick={createNoteAction} />;
  }

  or

  "use server";
  
  export async function createNote() {
    await db.notes.create();
  }

• Form Actions
  Read more: https://react.dev/reference/react-dom/components/form

  • useFormStatus: https://react.dev/reference/react-dom/hooks/useFormStatus
  • useActionState: https://react.dev/reference/react/useActionState

Further Reading

• https://react.dev/learn/you-might-not-need-an-effect
• https://react.dev/learn/separating-events-from-effects
• https://kaihao.dev/posts/Stale-props-and-zombie-children-in-Redux
• https://quick-teaching-tool.web.app/
• https://www.youtube.com/watch?v=FPJvlhee04E