Skip to main content

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

aka FC, Function-Component, Functional-Component

since React 16.8 FC with Hooks are more powerful than CC

[<span data-tooltip-id="preview__9Le7zdA2R4LzoE852">FC</span>](fc) [<span data-tooltip-id="preview__v8gQTKg8EzfY5Em7G">Design Pattern</span>](design-pattern)/Conventions

[<span data-tooltip-id="preview__9Le7zdA2R4LzoE852">FC</span>](fc) Advantages over [<span data-tooltip-id="preview__3apmEvsNEPPRaXSB9">CC</span>](cc)

Pure Component​

stateless Component that always renders same based on same props input.

Updater Function​

function call by Component to update state value

Refactoring [<span data-tooltip-id="preview__3apmEvsNEPPRaXSB9">CC</span>](cc) to [<span data-tooltip-id="preview__9Le7zdA2R4LzoE852">FC</span>](fc)

References​

  1. ReactComponentElement ↔ Type for React CC or FC

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

  3. return(...JSX) ↔ to return some UI from FC (typically described using JSX)

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

  5. useRef() ↔ Stateful Hook to persist Passive State Variable across renders in FC, as ref handle Escape Hatch to DOM API elements

  6. Popularity ↔ greater ecosystem support & DX for FC

  7. Client Component ↔ FC to render on Client dynamically

  8. Dependency ↔ any Variable local to FC Scope to control Hook Trigger

  9. useEffect() ↔ Hook to run Effect in FC at specific stage of Component Lifecycle, set by Deps Array

  10. Server Component ↔ FC to Server Side Render on Backend & serve Static Content to Thin Client

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

  12. <MonacoEditor> ↔ Monaco Editor FC

  13. Lazy() ↔ React API function to Lazy Load FC for Suspense Boundary

  14. Suspense API ↔ React API to defer render for FC

  15. Provider ↔ Wrapper FC to provide Context value to all Subscribing children

  16. Page ↔ export default FC to display unique UI for next File System Router

  17. <Head> ↔ ( Next 12 ) FC extends <head\>

  18. <Script\> ↔ ( Next 12 ) FC extends <script\> to optimize fetch/priority & load strategy

  19. <Image> ↔ ( Next 12 ) FC extends <img\> with Prefetch/Lazy Load & ✨img optimization to burn your free quota

  20. <Link\> ↔ ( Next 12 ) FC extends <a\> with Prefetch

  21. ReactDOMServer ↔ ReactDOM API Interface Object to render FC to static HTML

  22. to use [Error Boundary](error-boundary), only avail in [CC](cc) ↔ Error Boundary now available in FC via Next 13!

  23. React Router FC ↔ React Router API prebuild FC

  24. <Route> ↔ React Router FC to map route for element FC to path

  25. <RequireAuth> ↔ custom FC Wrapper to Declaratively control Protected Route via useAuth() & <Navigate\> from react-router-dom

  26. /src/components/App.js ↔ root JS file to define App FC to import other Components

  27. component ↔ name of FC import name - must matc or nothing shows in Storybook Concurrent Explorer!

  28. 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. <Split> ↔ react-split FC to wrap children with options

  2. [id].tsx ↔ ( Next 12 ) FC to export default Page with Dynamic Route with _id URL Parameter

  3. react-markdown ↔ React Lib FC Wrapper to render MDX extends with plugins

  4. File System Router ↔ to define Routing by filepath struct; to map FC src path to route

  5. @storybook/addon-a11y ↔ official storybook Addon to audit FC vs WCAG guidelines for max Accessibility & flag any violations

  6. src/components/HomepageFeatures/index.tsx ↔ docusaurus FC for root home page (classic preset)