React

  • — What is React?
    • — A JavaScript library that makes it easy to render HTML elements based on view state
  • — How it works
    • — There is one root components that have many components
    • — A component may have state, which are passed to children any level deep as props
      • — Props are managed as function variables
    • — React executes all componets rendering steps to make a DOM tree and render
    • — Updates to state has to happen through the React runtime
    • — When state changes,
      • — React creates another whole render in memory
        • — but no DOM update
      • — compares snapshots of old DOM state and new DOM state efficiently
      • — Updates the parts of DOM that has to change
    • — Event handlers are what changes the state
      • — They are added to elements
        • — React has a set of definitions
      • — Event handlers passes from top to bottom through props
        • — So events can go up and update state above
    • — There are many features added on top of this.
  • — Benefits over directly dealing with DOM
    • — No need to programatically change display items
      • — You mark the model variable change and react changes view automatically
    • — Easy to split components to many files
      • — Comes with tooling that lets you import and export
      • — Functions as components and props
    • — Easy to reason about
      • — Components are modular
    • — Components are modular and self-contained
  • — Evolution
    • — Class components and function components
      • — Initally you had class based components
        • — Only these could manage state
      • — Pure functoinal components that only deal with props
    • — Redux for state
      • — React apps with only functional components and state in a global object
      • — Because only using functional components gives many benefits,
    • — Context
      • — Passing props many levels deep require boiler plate code. This simplified that.
    • — Hooks
      • — Abandoning class components and lifecycles (which were complex)
    • — Suspense
      • — Easy way to handle loading by letting components inside throw promises
      • — When component inside throw a promise,
        • — suspense gets the promise and runs the async
        • — suspense renders the fallback component passed to it
        • — when promise is fulfilled, render like normal
        • — can be used for data as well as loading modules (react components, especially)
      • — This allows for components to be in different bundle
        • — Lazy function that wraps a component allows the component to be not available in memory
        • — This makes it possible for component to be in multiple bundles and speed up first load
      • — The benefits are that loading state need not be tracked and put in conditional statement
        • — If an outer component is suspense, anything deep into it throwing, makes all the things inside suspense go to fallback state
    • — Error boundary
      • — Similar to suspense. Catches errors and render fallback
    • — Concurrent mode
      • — Allows to skip update of state (going to suspense fallback) until any async call finishes
      • — If some async function is called wrapped by startTransition, fallback to suspense doesn't happen and UI is updated only after promise completes
      • — useTransition gives back startTransition and isPending
        • — isPending is a reactable state that tells if an operation is going on in the background
  • — Hooks
    • — rules of hook
      • — names start with "use"
      • — only at the top of the file and not inside the conditions
        • — not inside the conditions because order is what decided which item the hook is referring to
          • — always have to be the same run in each run
      • — hooks can be called only from components and other hooks
        • — a hook is therefore associated with a component always
    • — useState()
    • — useEffect()
    • — useContext()
    • — useCallback()
  • — React Server Components