Skip to main content

state ↔ persistent Snapshot of infothat App can access at given point in time

piece of memory stored insider a Fiber

Component State​

mechanism for storing values inside Component over time

Backing Instance​

Object (created in memory) to store & access data

includes referenceable values that do not require further calculations or assignment

Controlled Component​

Component with state manage by ReactDOM

Uncontrolled Component​

Component with state manage by DOM API NOT ReactDOM

Managing App-wide state

[<span data-tooltip-id="preview__qXaxHswpoTZw8AXzH">state</span>](state) can be [<span data-tooltip-id="preview__Wrvk5nHCJQtPZnMqh">mutable</span>](mutable) or [<span data-tooltip-id="preview__rGhFcpaeA2ogcatwz">immutable</span>](immutable)

state can be temporary or persistent

stateless​

of Entity lacking state

state essential for any interactive App

References​

  1. stateless ↔ of Entity lacking state

  2. CC ↔ React class Instance extends React.Component, provides render() Method to return UI, manage state & perform side effects on Lifecycle Methods

  3. this.state ↔ to initialize state in CC

  4. React.Component ↔ base Abstract Class that provides render() method to return React Element(s), state & Lifecycle Methods

  5. Reduce ↔ (process) to generate new state based on current state & some Action payload

  6. Passive State ↔ persistant state NOT trigger re-render on update

  7. Hook ↔ Specialized Function Functionally extends FC with Lifecycle Method & persistent state

  8. React DevTools ↔ Browser Extension to inspect React App (dev build only!) to view Component Hierarchy, props & state

  9. Diffing ↔ React HeuristicAlgorithm to reconcile change in state vs view & handle update to DOM

  10. ref ↔ Object return by useRef() to store state value, with mutable .current Stable Variable won't trigger re-render

  11. useState() ↔ Stateful Hook to persist single state value in FC

  12. Action ↔ object with type & payload info to pass Reducer to update state

  13. Controlled Component ↔ Component with state manage by ReactDOM

  14. Updater Function ↔ function call by Component to update state value

  15. Stateful Hook ↔ (typeof) Hook to add state to FC

  16. FC ↔ function to return UI via JSX. Pass propsfor dynamic input. add state via Hook

  17. Shared Layout ↔ UI to share mutliple Pages via children, to preserve state & not trigger re-render

  18. Client State ↔ state store by Client (Browser), TSC

  19. Server State ↔ state store on Backend RASP (Remote Async Shared Persistent)

  20. Remote ↔ of Server State to store on remote Backend, w/o Client direct access/control over state

  21. redux ↔ (Design Pattern) to colocate state in global external central store, to control data flow with predictable scalable pattern of Dispatch > Reducer > Store

  22. type ↔ to describe Action to change state

  23. payload ↔ to attach data to change state

  24. usePrevious() ↔ Custom Hook to get previous value of props or state

  25. Redux Store ↔ central global container to manage App state for redux

  26. Root Reducer ↔ redux fn to compute new state from old state & Action data

  27. @apollo/client ↔ JS state management lib to manage local/remote data via Declarative GraphQL Data Fetch

  28. useReducer() ↔ Stateful Hook with logic to update new state from current state & payload via Redux Pattern

  29. useSelector() ↔ OLD Redux API Library Hook to select piece of state from Redux Store. rep by useAppSelector()

  30. storybook ↔ popular Frontend Dev tool to isolate UI to doc/showcase/test, detangle Business Logic/state/Context

  31. Story ↔ export default Object to Declaratively render FC snapshot with specific key state to dev/test/doc

<code>export</code>  default {
  title "Button",
  component: Button
}

<code>export</code>  const ButtonRed = () => <Button label="Press me" backgroundColor="red" /\>

  1. useAuth() ↔ async Custom Hook to get Auth state from Backend/Online API

  2. Time-Travel ↔ (feat) to revisit redux state history

  3. Protected Route ↔ Route with access restrict to Auth state

  4. Centralized ↔ redux manages App state from single global location

  5. Uncontrolled Component ↔ Component with state manage by DOM API NOT ReactDOM