458 docs tagged with "React"

_app.tsx is defined as: ( Next 12 ) to share global CSS stylesheet, layout or config. Topics on: . Read more: React, React Stack, Nextjs, Next 12|FullStack Wiki

_category_.json. Topics on: . Read more: React, React Stack, Docusaurus, Docusaurusconfigjs, Config, Presets, Classic, Classic Folder Structure, Docs, Folder

_document.tsx. Topics on: . Read more: React, React Stack, Nextjs, Next 12|FullStack Wiki by Roger J

_Folder. Topics on: _category_.json, _mypage.md. Read more: React, React Stack, Docusaurus, Docusaurusconfigjs, Config, Presets, Classic, Classic Folder Structu

_mypage.md. Topics on: . Read more: React, React Stack, Docusaurus, Docusaurusconfigjs, Config, Presets, Classic, Classic Folder Structure, Docs, Folder | Wiki

:::caution is defined as: . Topics on: . Read more: React, React Stack, Docusaurus, Admonitions Callout Blocks, Caution|FullStack Wiki by Roger J

:::danger is defined as: danger callout. Topics on: . Read more: React, React Stack, Docusaurus, Admonitions Callout Blocks, Danger|FullStack Wiki by Roger J

:::tip is defined as: tip Admonitions Callout Blocks. Topics on: . Read more: React, React Stack, Docusaurus, Admonitions Callout Blocks, Tip | Full-Stack Wiki

!deprecated createClass method. Topics on: !deprecated via create-react-class module. Read more: React, React Concepts, Component Based Architecture, Component,

!refactor class with non-pure method. Topics on: when helper method calls this.props with no arguments, need to modify helper function into a pure function, OR

!refactor Class with pure helper. Topics on: !recall class method can be moved outside CC, !convention keep utility helper function outside FC. Read more: React

!refactor constructor(props). Topics on: constructor(props) only called once in CC lifetime, useMemo to Memoization for rerender. Read more: React, React Concep

!refactor Render only. Topics on: render() becomes return (...JSX), destructure props. Read more: React, React Concepts, Component Based Architecture, Component

!snippet usecallback. Topics on: !snippet useCallback() for deletable todo app. Read more: React, React API, Hooks API, Memoizing Hook, Use Callback | Dev Wiki

!snippets useEffect. Topics on: !snippet useEffect log window dimensions on resize what is the purpose of a cleanup function here?, !snippet disable eslint deps

.storybook is defined as: dotconfig dir for storybook settings. Topics on: .storybook/preview.js, .storybook/main.js. Read more: React, React Stack, Storybook,

.storybook/main.js is defined as: storybook config file to set Glob Pattern to detect new stories Storybook Addon & use index.css. Topics on: expo. Read more: R

.storybook/preview.js is defined as: to set parameters to control storybook addon/feature behavior, actions. Topics on: sb parameters. Read more: React, React S

'use client' is defined as: (Next 13) Directive to opt-in to Client Component. Topics on: . Read more: React, React Concepts, Component Based Architecture, Comp

(new) Render Cycle with Fiber. Topics on: Render Phase, Commit Phase. Read more: React, React Concepts, Component Based Architecture, Component, New Render Cycl

@apollo/client is defined as: JS state management lib to manage local/remote data via Declarative GraphQL Data Fetch. Topics on: agnostic. Read more: React, Rea

@docusaurus/plugin-ideal-image is defined as: docu plugin extends <img> to autogen placeholder for Lazy Loading & resized images variants for responsive display

@docusaurus/plugin-sitemap is defined as: docu plugin to gen sitemap for site for SEO Web Crawler | pack with classic preset. Topics on: @docusaurus/plugin-site

@monaco-editor/react. Topics on: install 3.7.5, Monaco Editor React Component, <MonacoEditor>, props, easy setup! out of box supports:, Pass in config to underl

@reduxjs/toolkit is defined as: Official Opinionated redux Toolset Lib with simplified improved syntax. Topics on: Thoughts on RTK Migration, @reduxjs/toolkit/q

@reduxjs/toolkit/query is defined as: @reduxjs/toolkit query API to Data Fetch/Caching & replace Thunk. Topics on: . Read more: React, React Stack, Redux, Redux

@storybook/addon-a11y is defined as: official storybook Plugin to audit FC vs WCAG guidelines for max Accessibility & flag any violations. Topics on: 'Elements

/app is defined as: ( Next 13 ) dir to export Page, allows Colocation. Topics on: /app replace /pages ( Next 12 ) & default to Server Component. Read more: Reac

/node_modules is defined as: dir with all Dependency & their sub-Dependency & their sub-sub-Dependency & .... Topics on: . Read more: React, React Stack, CRA, A

/pages is defined as: ( Next 12 ) dir to export default Page. Topics on: [id].tsx, /pages/api. Read more: React, React Stack, Nextjs, Next 12, Pages, Page| Wiki

/pages/api is defined as: dir to map to API endpoint, instead of Page for server-side bundle. Topics on: API Route Helpers. Read more: React, React Stack, Nextj

/public is defined as: dir to serve Static Content. Topics on: /public/index.html. Read more: React, React Stack, CRA, App Skeleton, Public, Static Content|Wiki

/public/index.html is defined as: root HTML Web Page to serve App Component, entry point for Browser. Topics on: <div id='root'></div>. Read more: React, React

/src is defined as: dir to add Source Code & other files to later Bundler into single Package. Topics on: /src/main.tsx, /src/index.js, /src/components/App.js.

/src/components/App.js is defined as: root JS file to define App FC to import other Components. Topics on: !deprecated import React no longer required for JSX.

<BrowserRouter> is defined as: Provider for global access to react-router-dom in App. Topics on: Why does react-router-dom dev insist to rename BrowserRouter as

<div id='root'></div> is defined as: root container to render React App into. Topics on: why not just render directly to <body>?. Read more: React, React Stack,

<FormSpy/>. Topics on: Less renders. Read more: React, React Stack, Redux, Redux Form, React Final Form, Upgrades|FullStack Wiki by Roger J

<Head> is defined as: ( Next 12 ) FC extends <head>. Topics on: . Read more: React, React Stack, Nextjs, Next Component, Head, Next 12, FC|FullStack Wiki by RJ

<Image> is defined as: ( Next 12 ) FC extends <img> with Prefetch/Lazy Loading & ✨img optimization to burn your free quota. Topics on: unoptimized. Read more: R

<Link> is defined as: React Router FC to provide link to <Route>; extends <a>. Topics on: common to Wrapper <Link> with <li> for block format, state. Read more:

<MonacoEditor> is defined as: Monaco Editor FC. Topics on: theme, language, value. Read more: React, React Stack, Monaco Editor React, Monaco Editor, FC | Wiki

<Navigate> is defined as: React Router FC to Declarative trigger navigate. Topics on: state. Read more: React, React Stack, React Router Dom, React Router API,

<RequireAuth> is defined as: custom FC Wrapper to Declarative control Protected Route via useAuth() & <Navigate> from react-router-dom. Topics on: . Read more:

<Route> is defined as: React Router FC to map route for element FC to path. Topics on: <Route> must renders element || null, element, path. Read more: React, Re

<Routes> is defined as: React Router FC to auto-handle multiple <Route>, Nest Route, etc. Topics on: <Routes> replaces <Switch> from react-router v5, <Route>. R

<Split> is defined as: react-split FC to wrap children with options. Topics on: . Read more: React, React Stack, React Split, FC|FullStack Wiki by Roger J

<Suspense> is defined as: Suspense API Wrapper to define Suspense Boundary to allow Lazy Loading. Topics on: fallback. Read more: React, React API, Suspense API

<Switch>. Topics on: . Read more: React, React Stack, React Router Dom, React Router API, React Router V 5, Switch|FullStack Wiki by Roger J

<Tabs> is defined as: UI to show tab toggle. Topics on: . Read more: React, React Stack, Docusaurus, Docusaurus Features, Built In Docusaurus UI FC|web-Dev Wiki

Action is defined as: object with type & payload info to pass Reducer to update state. Topics on: type, payload. Read more: React, React Stack, Redux, Redux Pat

actions is defined as: mocked callback to handle storybook behavior via actions panel in storybook UI Storybook Concurrent Explorer. Topics on: . Read more: Rea

add all reducers. Topics on: add combined reducers to, add individual reducers to. Read more: React, React Stack, Redux, Redux Folder Structure, Src State OR Sr

Admonitions Callout Blocks is defined as: where is styling for :::tip and :::danger :::caution defined?! - Callout blocks to draw extra attention to specific c

App Data is defined as: data that user is accessing. Topics on: normally stored on global level in Component Hierarchy. Read more: React, React Concepts, Compon

app skeleton. Topics on: /node_modules, /public, /src, package.json, package-lock.json. Read more: React, React Stack, CRA, App Skeleton|FullStack Wiki by Roger

Babel is defined as: Dev tool to Transpile JSX & Polyfill JS. Topics on: . Read more: React, React API, JSX, Transpile, Dev Tool, Polyfill, JS | Full-Stack Wiki

Backing Instance is defined as: Object (created in memory) to store & access data. Topics on: created React class instances to track changes over time, React El

Boilerplate is defined as: verbose repetitive Source Code snippets, to be obselete by AI..!. Topics on: . Read more: React, React Stack, CRA, Boilerplate, Sourc

built-in docusaurus UI FC. Topics on: <Tabs>. Read more: React, React Stack, Docusaurus, Docusaurus Features, Built In Docusaurus UI FC |FullStack Wiki by Roger

Calling Order. Topics on: Linked List, Calling Order is implicitly defined by order of Hook written in code, which is added to Linked List of Fiber. Read more:

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

changefreq is defined as: to set frequency for crawler to re-index 'always', 'hourly', 'daily', 'weekly', 'monthly', 'yearly', 'never'. Topics on: 'always'. Rea

Child Component is defined as: Component nest within Component. Topics on: . Read more: React, React Concepts, Component Based Architecture, Component, Structur

children is defined as: special placeholder props to nest JSX. Topics on: access via this.props.children. Read more: React, React Concepts, Component Based Arch

children is defined as: enables Composable Composite Components by nesting additional React.createElement calls. Used to pass innerText. React recursively evals

Chromatic is defined as: tool to automate storybook integrate CI git tooling. Freemium. Topics on: Free for up to 5k snapshots/month, UI/visual Regression Testi

classic is defined as: preset to allow only the following fields: debug, docs, blog, pages, sitemap, theme, googleAnalytics, gtag. Topics on: classic folder str

classic folder structure. Topics on: docs. Read more: React, React Stack, Docusaurus, Docusaurusconfigjs, Config, Presets, Classic, Classic Folder Structure

Classic Redux Flow is defined as: older outdated pattern to set up redux. Topics on: Install deps, Create types.js in ../actions, Create reducer in ../reducers,

Cleanup Function is defined as: function call on Unmount, via return function from useEffect(). Topics on: Cleanup Function used to prevent Memory Leak, AbortCo

Client Component is defined as: FC to render on Client dynamically. Topics on: 'use client'. Read more: React, React Concepts, Component Based Architecture, Com

Client Component > Server Component. Topics on: to make SPA, for compat, for old codebase. Read more: React, React Concepts, Component Based Architecture, Compo

Code line/block highlighting. Topics on: // highlight-next-line, // highlight-start, // highlight-end. Read more: React, React Stack, Docusaurus, Docusaurus MDX

Colocation is defined as: Next 13 /app can colocate all files. Topics on: . Read more: React, React Stack, Nextjs, Next 13, Colocation, App|FullStack Wiki by RJ

Commit Phase is defined as: (process) to apply UI change to DOM API (in one Sync shot). Topics on: Commit Phase uses Time-Slicing to split work into chunks. R

component is defined as: name of FC import name - must matc or nothing shows in Storybook Concurrent Explorer!. Topics on: . Read more: React, React Stack, Stor

Component is defined as: 🧱Composable code to Encapsulation, DRY & return React Element Fiber via JSX. Topics on: FC, CC, props, state, Component Lifecycle, Ser

Component Based Architecture is defined as: (Paradigm) to visualize UI as Component to architect (DOS) App. Topics on: DOS, Component. Read more: React, React C

Component Design Flow. Topics on: shape UI by app data, decompose (split) elements into (reusable) Components - ideally highly repetitive elements, group Compo

Component Hierarchy is defined as: tree-like relationship of Component to structure data flow. Topics on: Component Composition, Composition Vs Inheritance, Com

Component Lifecycle. Topics on: FC will only render when, Render, Mount, Unmount, Re-render, Render Props, !deprecated CC Lifecycle Method, Most Browser render

Component Relationship is defined as: A direct parent-child relationship of Component with unidirectional data-flow. Topics on: Parent Component, Child Componen

Component State is defined as: mechanism for storing values inside Component over time. Topics on: App Data, UI state, Form Data, How to arrange state, Componen

Component State in FC vs CC. Topics on: how JS Syntax varies for FC vs CC. Read more: React, React Concepts, Component Based Architecture, Component, State, Com

Component structure diagram. Topics on: . Read more: React, React Concepts, Component Based Architecture, Component, Structure Of Component|FullStack Wiki by RJ

componentWillMount(). Topics on: UNSAFE_componentWillMount(). Read more: React, React Concepts, Component Based Architecture, Component, CC, Declare A Class Wit

componentWillReceiveProps() is defined as: . Topics on: UNSAFE_componentWillReceiveProps(). Read more: React, React Concepts, Component Based Architecture, Comp

componentWillUpdate() is defined as: . Topics on: UNSAFE_componentWillUpdate(). Read more: React, React Concepts, Component Based Architecture, Component, CC, D

Composable is defined as: (property) of Component (or any general entity) being self-contained, nestable & portable, easily composed into Composite Components.

Composite Component is defined as: Component contains another Component. Topics on: . Read more: React, React Concepts, Component Based Architecture, Component

config is defined as: section to edit docs site routing. Topics on: presets: []. Read more: React, React Stack, Docusaurus, Docusaurusconfigjs, Config| Dev Wiki

configureStore() is defined as: @reduxjs/toolkit to replace createStore. Topics on: . Read more: React, React Stack, Redux, Reduxjs Toolkit, Configure Store

connect mapStateToProps. Topics on: connect(null) when no state is passed. Read more: React, React Stack, Redux, React Redux, Redux Flow, Classic Redux Flow

const [_value, _setter] = useState(initial). Topics on: !convention to destructure value & setter when calling useState, value, setter, initial. Read more: Reac

constructor(props). Topics on: . Read more: React, React Concepts, Component Based Architecture, Component, CC, Declare A Class With Props |FullStack Wiki by RJ

Consumer is defined as: redundant WET way to access Context - use useContext() instead. Topics on: . Read more: React, React API, Context API, WET, Context, Use

Context is defined as: Interface Object to share data to all Subscribe children. Topics on: . Read more: React, React API, Context API, Context, Interface Objec

Context API is defined as: React API to fix Prop Drilling, share global data. Topics on: createContext(), Provider, Consumer, Subscribe, Context. Read more: Rea

Controlled Component is defined as: Component with state manage by ReactDOM. Topics on: . Read more: React, React Concepts, Component Based Architecture, Compon

CRA is defined as: CRAp Scaffolding Dev tool to gen new React project with app skeleton & Boilerplate. Topics on: app skeleton, Boilerplate, Local Dev Server, C

CRA NPM Commands. Topics on: npm start, npm run build, npm test, npm run eject. Read more: React, React Stack, CRA, CRA NPM Commands|FullStack Wiki by Roger J

CRA Templates. Topics on: to import template for CRA, minimal template, typescript, minimal-typescript, minimal redux-typescript, react boilerplate. Read more:

create-docusaurus is defined as: to scaffold new docusaurus project. Topics on: npx create-docusaurus@latest _my_project classic --typescript, npx create-docusa

create-next-app is defined as: Next.js Scaffolding Dev tool with wizard setup. Topics on: . Read more: React, React Stack, Nextjs, Next Setup, Next Js, Scaffold

createContext() is defined as: Context API function to create Context Object. Topics on: . Read more: React, React API, Context API, Function, Context, Object

createPortal() is defined as: ReactDOM API Escape Hatch function to render child HTMLElement to any container HTMLElement other than parent. Topics on: Portal,

createRoot() is defined as: react-dom/client Method to create new Root container to inject App. Topics on: createRoot() signature options?: (onReoverableError |

createSlice() is defined as: @reduxjs/toolkit to setup slice state with input { initialState, reducers object, name}. Topics on: to export actions from slice, e

createStore() is defined as: OLD Redux API function to create new Redux Store Instance. Topics on: . Read more: React, React Stack, Redux, OLD Redux API, Functi

CSF is defined as: (standard) Component Story format based on ES Module. Topics on: . Read more: React, React Stack, Storybook, Story, CSF, ES Module | Dev Wiki

current working flow:. Topics on: downgrade react-scripts@4.0.3, initiate highlighter. Read more: React, React Stack, Monaco Editor React, Monaco Jsx Highlighte

Custom Hook is defined as: user defined Hook to consume Library Hook & reuse stateful logic. Topics on: usehooks.com, useToggle(), useRouter(), useEventListener

Custom Link is defined as: to conditionally render. Topics on: . Read more: React, React Stack, React Router Dom, React Router Patterns |FullStack Wiki by Roger

dangerouslySetInnerHTML is defined as: special property to inject inner HTML into JSX element. Topics on: inject some HTML. Read more: React, React API, JSX, JS

declare a class with props. Topics on: React.Component, React.PureComponent, constructor(props), super(props), this.state, Must call this.state inside construct

declare FC with hooks. Topics on: !snippet signature for FC with Hook, return(...JSX). Read more: React, React API, Hooks API, Hook|FullStack Wiki by Roger J

decorators is defined as: to add Wrapper for Story, for inline CSS || Context Provider. Topics on: . Read more: React, React Stack, Storybook, Story, Wrapper, C

Dependency is defined as: any Variable local to FC Scope to control Hook Trigger. Topics on: Variable inside Scope of hook is not relevant Dependency. Read more

Deps Array is defined as: Dependency[] to pass as last Argument to Trigger Hook. Topics on: Deps Array applies to useEffect(), useLayoutEffect(), useMemo() & us

Diffing is defined as: React Heuristic Algorithm to reconcile change in state vs view & handle update to DOM API. Topics on: internal state = VDOM, view = DOM A

Disable Storybook telemetry is defined as: need to manually opt-out for every project😫. Topics on: add --disable-telemetry flag to every storybook run!. Read m

Discord-style button is defined as: react-icons for svg. tailwindcss styles. Topics on: . Read more: React, React Snippets|FullStack Wiki by Roger J

Dispatch is defined as: redux function to send Action object to Reducer. Topics on: . Read more: React, React Stack, Redux, Redux Concepts, Dispatch, Function,

Dispatch Function is defined as: function to Dispatch Action to Reducer. Topics on: . Read more: React, React Stack, Redux, Redux Pattern, Dispatch Function, Fu

docs. Topics on: _Folder. Read more: React, React Stack, Docusaurus, Docusaurusconfigjs, Config, Presets, Classic, Classic Folder Structure, Docs|FullStack Wiki

Docu Hooks. Topics on: useColorMode(), useThemeContext(). Read more: React, React Stack, Docusaurus, Docusaurus API|FullStack Wiki by Roger J

docu plugin is defined as: to extend docusaurus with new feat. Topics on: docusaurus-theme-search-typesense, @docusaurus/plugin-sitemap, @docusaurus/plugin-idea

docusaurus is defined as: React Stack SSG CMS for API docs as SPA with built-in Routing + MDX support. Topics on: docusaurus features, !use @docusaurus for v2+

docusaurus > redoc on github. Topics on: . Read more: React, React Stack, Docusaurus|FullStack Wiki by Roger J

Docusaurus API. Topics on: Docu Hooks. Read more: React, React Stack, Docusaurus, Docusaurus API|FullStack Wiki by Roger J

Docusaurus Codeblock is defined as: MDX syntax based on Prism, Prism React Renderer. Topics on: showLineNumbers, {a, b-c} showLineNumbers, MDX highlighting, Cod

Docusaurus concepts. Topics on: Document, Sidebar, Docusaurus file system. Read more: React, React Stack, Docusaurus, Docusaurus Concepts | FullStack Wiki by RJ

docusaurus features. Topics on: docs file-based routing, darkmode, ONLY MD headers will be auto-add to RHS nav, built-in docusaurus UI FC, react-router+file-sys

Docusaurus file system. Topics on: /docs, /blog, sidebars.js. Read more: React, React Stack, Docusaurus, Docusaurus Concepts, Docusaurus File System | Dev Wiki

Docusaurus MDX Syntax. Topics on: Docusaurus Codeblock. Read more: React, React Stack, Docusaurus, Docusaurus MDX Syntax|FullStack Wiki by Roger J

docusaurus pain fixes. Topics on: speed up 2hr+ SSG build times for large sites!, don't delete node_modules/.cache - ie via docusaurs clear - unless serious bug

docusaurus-theme-search-typesense is defined as: typesense Search UI FC docu plugin for docusaurus. Topics on: searchbar UI component is hardcoded to show top r

docusaurus.config.js is defined as: . Topics on: config. Read more: React, React Stack, Docusaurus, Docusaurusconfigjs|FullStack Wiki by Roger J

doesn't work steps:. Topics on: wasd, import dependencies for HL. Read more: React, React Stack, Monaco Editor React, Monaco Jsx Highlighter | Full-Stack Wiki

DOM Abstractions. Topics on: Synthetic Event, Synthetic Event is React API to standardize events since events are not (currently) part of core JS & Browser vend

DOS is defined as: Design Organize Structure. Topics on: . Read more: React, React Concepts, Component Based Architecture, DOS|FullStack Wiki by Roger J

downgrade react-scripts@4.0.3. Topics on: v5+ throws error about Build module undefined!. Read more: React, React Stack, Monaco Editor React, Monaco Jsx Highlig

dynamic value for initial useState(). Topics on: props, initializer function. Read more: React, React API, Hooks API, Stateful Hook, Use State, Initial|Dev Wiki

easy setup! out of box supports:. Topics on: code auto-complete and prompt, code syntax highlighting, fade out unused variables, linting, mini-map overview!. Re

Edge Cases. Topics on: Verify hard-to-reach edge cases. Read more: React, React Stack, Storybook, Storybook Features|FullStack Wiki by Roger J

Edge Runtime is defined as: Runtime Environment to execute on Edge. Topics on: . Read more: React, React Stack, Nextjs, Next Concepts, Server Runtime, Edge Runt

Effect is defined as: Callback Function to run inside function, under certain conditions. Topics on: . Read more: React, React API, Hooks API, Effect Hook, Effe

Effect Hook is defined as: (typeof) Hook to run Effect inside Component at different stages of Component Lifecycle. Topics on: useEffect(), useLayoutEffect(), u

element is defined as: <Route> props to attach JSX. Topics on: . Read more: React, React Stack, React Router Dom, React Router API, React Router FC, Routes, Rou

Error Boundary is defined as: fallback mechanism for to handle Exception in child component. Topics on: used to respond to potential unhandled errors in comple

error.tsx is defined as: ( Next 13 ) Page to export default UI on Trigger Error Boundary. Topics on: error.tsx is reserved name for Error UI for Next 13. Read m

Escape Hatch is defined as: (mech) to express logic outside React model - to direct manipulate DOM API. Topics on: React API Escape Hatch include useRef() & Por

External System is defined as: e.g. DOM API element, Global Object, fetch request. Topics on: . Read more: React, React API, Hooks API, Effect Hook, Side Effe

extraReducers is defined as: to allow createSlice() to respond to other extenal type (action type not generated by itself). Topics on: External Action. Read mor

fallback is defined as: props to set JSX placeholder for Suspense Boundary when Lazy Loading. Topics on: . Read more: React, React API, Suspense API, Suspense,

FC is defined as: function to return UI via JSX. Pass propsfor dynamic input. add state via Hook. Topics on: since React 16.8 FC with Hooks are more powerful th

FC Advantages over CC. Topics on: Compact, Readabilty, Purity, Simplicity, Testability, Popularity. Read more: React, React Concepts, Component Based Architectu

FC Design Pattern/Conventions. Topics on: destructure props in Function Signature of FC, set Parameter Default Value for omitted attributes in FC, !convention t

FC will only render when. Topics on: Component mount, Parent Component re-renders, Hook (or state) update. Read more: React, React Concepts, Component Based Arc

FCS is defined as: Fetch Cache Sync. Topics on: . Read more: React, React Stack, React Query, FCS|FullStack Wiki by Roger J

Fiber is defined as: internal React Object to rep each Node of DOM Tree. Topics on: Fiber acts as unit of work in Render Phase & Commit Phase, Fiber replaces Re

File System Router is defined as: to define Routing by filepath struct; to map FC src path to route. Topics on: Page, Index Route, Nest Route, Shared Layout. Re

findDOMNode() is defined as: deprecated ReactDOM API Escape Hatch to access DOM API Node. Topics on: use ref vs findDOMNode(), StrictMode API will flag/warn u

fix storybook errors. Topics on: Error could not find react-redux context value; please ensure the component is wrapped in a <Provider>, add react-redux Provide

FPS is defined as: Frames Per Second. Topics on: . Read more: React, React Concepts, Component Based Architecture, Component, Component Lifecycle, FPS| Dev Wiki

Gatsby is defined as: SSG for pure blogs. Next.js alt for pure static sites. 412K vs next 3.5M WDL. GraphQL. Topics on: Docz. Read more: React, React Stack, SSG

getServerSideProps() is defined as: async fn to run on Backend to pre-render on each request, to fetch async external data. Topics on: . Read more: React, React

getState(). Topics on: . Read more: React, React Stack, Redux, OLD Redux API|FullStack Wiki by Roger J

head.tsx is defined as: ( Next 13 ) Page to export default <head> for each Page Route. Topics on: head.tsx replace <Head> FC ( Next 12 ). Read more: React, Rea

Hidden Dependency is defined as: External outer scope variable or invoking external function. Topics on: Hidden Dependency can be moved into input Argument to t

History & Locations. Topics on: History Object, History Action, History Stack. Read more: React, React Stack, React Router Dom, React Router API, React Router V

History Action is defined as: URL change to History Stack; pop, push or replace. Topics on: RR listens for URL changes in History Object, whether History Action

History Object is defined as: React Router API Interface Object to Subscribe URL change & manipulate History Stack. Topics on: . Read more: React, React Stack,

History Stack is defined as: Log of previous browsed locations, kept track by Browser. Topics on: React Router API subscribe to History Stack to enable Client R

HOC is defined as: Component to modify/enhance other Component. Topics on: sometimes does not render() anything,. Read more: React, React Concepts, Component Ba

Hook is defined as: Specialized Function Functional Programming extends FC with Lifecycle Method & persistent state. Topics on: Specialized Function to 'hook' i

Hook (or state) update. Topics on: should store higher-level input info, use boolean flag state enables cleaner data flow, Mutate DOM Directly. Read more: React

Hooks API is defined as: React API to make React more Functional Programming. Topics on: Hook, Custom Hook, Stateful Hook, Effect Hook, Memoizing Hook, Library

how JS Syntax varies for FC vs CC. Topics on: . Read more: React, React Concepts, Component Based Architecture, Component, State, Component State, Component Sta

How to arrange state. Topics on: state should be kept closer to Component that needs it, state can be stored in either Component, Parent Component or any Ascend

Hydrate is defined as: (process) to update content in static HTML. Topics on: . Read more: React, React API, React DOM API, Hydrate|FullStack Wiki by Roger J

hydrateRoot() is defined as: variant of createRoot() to Hydrate container render by ReactDOMServer. Topics on: hydrateRoot() signature. Read more: React, React

immer. Topics on: . Read more: React, React Stack|FullStack Wiki by Roger J

Immutable data structure. Topics on: data structure with persistent versioning making copies of state to keep track of changes over time, JS doesn't support imm

Immutable state. Topics on: immutable state is accessed via this.props for class components, state that cannot be changed after it is created. Read more: React,

Incremental Adoption is defined as: (feat) Next 12 compat with Next 13, can migrate individual Page from /pages to /app. Topics on: . Read more: React, React St

initial is defined as: value used to setup first instance render, ignored on re-render. Topics on: static initial values for useState(), dynamic value for initi

Initial State is defined as: value of Variable/property on first run of Component. Topics on: . Read more: React, React Stack, Redux, Redux Pattern, Initial Sta

Initialization Argument is defined as: Argument pass to Initialization Function. Topics on: . Read more: React, React API, Hooks API, Stateful Hook, Use Reducer

Initialization Function is defined as: function pass as Initialization Argument to useReducer() to generate Initial State for Reducer. Topics on: . Read more: R

initializer function is defined as: set value to result of calculation. Topics on: pass function reference but do not invoke it with (), pass Initializer Functi

initState is defined as: define init state Object to describe app. Topics on: . Read more: React, React Stack, Redux, Redux Concepts, Redux Reducer, Object|Wiki

install deps. Topics on: next 11+ uses webpack5 builder by default. Read more: React, React Stack, Storybook, Setup Storybook, Storybook Next 12 Setup| Dev Wiki

My template for mdx

ISR is defined as: Incremental Static Regeneration scaling strat to serve skeleton & SSG on-demand per-page basis & keep update with set interval to prevent Sta

JSX is defined as: Syntactic Sugar to mix HTML inside JS, later Transpile to React.createElement(). Topics on: JSX Syntax, abstraction over Low-Level functions

JSX Branching is defined as: Design Pattern for. Topics on: Branching, Early return, render nothing, Replace if-else with Ternary Operator, Use Truthy-Falsy for

JSX gotchas. Topics on: multi-word HTML Attribute are camelCase, Boolean attribute values must be placed inside { }, Default value for attribute = {true} omitte

JSX reserved word alternatives. Topics on: class rename to className, for rename to htmlFor. Read more: React, React API, JSX, JSX Syntax, JSX Gotchas| Dev Wiki

JSX String Coercion quirks. Topics on: false, undefined, null are rendered to '', 0 render to '0'. Read more: React, React API, JSX, JSX Syntax, JSX Gotchas

JSX Syntax. Topics on: JSX follows camelCase naming convention for HTML attributes, class attribute renamed to className due to class reserved JS keyword, Custo

JSX Transform is defined as: JSX translated to React.createElement() calls. Topics on: !deprecated old version transforms JSX in codeinto, React 17 updated JSX

key is defined as: special props as string UID for VDOM to track/Diffing list elements. Topics on: Math.random() key are unstable & may hurt perf!, key should b

layout.tsx is defined as: ( Next 13 ) Page to export default layout UI to share with children. Topics on: layout.tsx does not support passing props to children,

Lazy Initial value is defined as: function pass as Parameter into useState(), to assign return value as Initial State value, on first-call only. Topics on: Lazy

Lazy Load Routes is defined as: use Lazy() with route elements. Topics on: . Read more: React, React Stack, React Router Dom, React Router Patterns, Lazy | Wiki

Lazy() is defined as: React API function to Lazy Loading FC for Suspense Boundary. Topics on: . Read more: React, React API, Suspense API, Lazy, Function, Lazy

Leaf is defined as: Last Node in Subtree w/o children. Topics on: . Read more: React, React Stack, Nextjs, Next Concepts, Tree, Leaf, Subtree | Full-Stack Wiki

Library Hook is defined as: (typeof) advanced Hook for use in larger component libraries & modules. Topics on: useDebugValue, useImperativeHandle, userInsertion

Lifecycle Method is defined as: method to perform Effect at specific stage of Component Lifecycle. Topics on: componentDidUpdate(), componentDidMount(), compone

Linked List is defined as: to keep track of Calling Order. Topics on: . Read more: React, React API, Hooks API, Hook, Calling Order|FullStack Wiki by Roger J

Live demo:. Topics on: ovvwzkzry9.codesandbox.io. Read more: React, React Stack, React Credit Cards, Live Demo|FullStack Wiki by Roger J

Live demo:. Topics on: nomcopter.github.io/react mosaic/. Read more: React, React Stack, React Mosaic, Live Demo|FullStack Wiki by Roger J

loading.tsx is defined as: ( Next 13 ) Page to export default loading UI on Trigger Suspense Boundary. Topics on: loading.tsx is reserved name for Loading UI fo

Local Dev Server. Topics on: Needed because of CORS preventing local HTML file access to other domains, http://localhost:3000, npx serve, npx http-server. Read

Locations. Topics on: Location, Location State. Read more: React, React Stack, React Router Dom, React Router API, React Router V 5, RR Concepts| FullStack Wiki

Managing App-wide state. Topics on: pass state from parent by setting props on child, receive state from parent as prop, receive updater function from parent as

mapStateToProps() is defined as: . Topics on: . Read more: React, React Stack, Redux|FullStack Wiki by Roger J

Matching. Topics on: Match, Matches. Read more: React, React Stack, React Router Dom, React Router API, React Router V 5, RR Concepts|FullStack Wiki by Roger J

MDX highlighting. Topics on: # highlight-next-line. Read more: React, React Stack, Docusaurus, Docusaurus MDX Syntax, Docusaurus Codeblock |FullStack Wiki by RJ

Memo() is defined as: React function from useMemo() API for Memoization of any function !snippet for addition. Topics on: . Read more: React, React API, Hooks

Memoization of any value. Topics on: to avoid expensive recalculations, to maintain Referential Equality, !snippet useMemo() to memoize filtering. Read more: Re

Memoization of Component. Topics on: used to optimize Reconciliation by skipping any JSX comparison which saves time, !snippet Memo() with sub-component in todo

Memoizing Hook is defined as: (typeof) Hook to Memoization for better perf by avoid repeat calculations. Topics on: useMemo(), useCallback(), useId(). Read more

Minimalist is defined as: React focus to UI Primitive, defer other design concerns to React Stack. Topics on: not strongly opinionated like other UI frameworks

Monaco Editor React Component. Topics on: is a wrapper for actual Monaco Editor. Read more: React, React Stack, Monaco Editor React|FullStack Wiki by Roger J

monaco-jsx-highlighter. Topics on: uses jscodeshift to parse JSX and find which parts to highlight, updated steps for highlighter:, current working flow:, doesn

Mount is defined as: (process) to add UI to DOM API. Topics on: . Read more: React, React Concepts, Component Based Architecture, Component, Component Lifecycle

Move Data Fetch to Server-Side is defined as: ( Next 13 ) to Colocation Data Fetch ops in Server Component for Sync perf. Topics on: Next 13 Move Data Fetch to

mutable data structure. Topics on: transient data structure supporting only single version over time, overwritten by updates. Read more: React, React Concepts,

mutable state. Topics on: state that can change after it is created, mutable state is accessed via this.state property of class instance. Read more: React, Reac

Navigating. Topics on: Outlet. Read more: React, React Stack, React Router Dom, React Router API, React Router V 5, RR Concepts|FullStack Wiki by Roger J

Nest Route. Topics on: . Read more: React, React Stack, Nextjs, Next Concepts, File System Router, Nest Route|FullStack Wiki by Roger J

Next 12 is defined as: verion 12 of Next.js, deprecated as of October 25th, 2022. Topics on: /pages, /public, /(dir), _document.tsx, _app.tsx, getStaticPaths(),

Next 12 Migration. Topics on: Incremental Adoption /app per Page, Transition to Server Component. Read more: React, React Stack, Nextjs, Next 13| FullStack Wiki

Next 13 is defined as: version 13 of Next.js, beta, latest as of October 25th, 2022. Topics on: Incremental Adoption, Move Data Fetch to Server-Side, Colocation

Next Component. Topics on: <Head>, <Script>, <Image>, <Link>. Read more: React, React Stack, Nextjs, Next Component|FullStack Wiki by Roger J

Next Concepts is defined as: Next.js opinionated solutions to various fullstack design concerns. Topics on: Pre-render, Next Router, Tree, File System Router, S

Next Data Fetching is defined as: Opinionated Design Patterns in Next.js for Data Fetch situations. Topics on: (default) Next.js requests are all Static Fetch,

Next Definition. Topics on: Next.js MIT License, Vercel. Read more: React, React Stack, Nextjs, Next Definition|FullStack Wiki by Roger J

Next Router is defined as: built-in router for Next.js with specific opinionated Routing patterns. Topics on: . Read more: React, React Stack, Nextjs, Next Conc

Next Scripts is defined as: package.json scripts for Next.js project. Topics on: next dev, next build, next start, next lint. Read more: React, React Stack, Nex

Next Setup. Topics on: Next Scripts, Next CLI, create-next-app, To add CSS, next-code-elimination-tool. Read more: React, React Stack, Nextjs, Next Setup | Wiki

Next.js is defined as: fullstack React Stack for SSG & now official react team approval?! headless CMS. Topics on: Next 13, Next 12, Next Component, Next Concep

Nextra is defined as: opinionated SSG solution for Next.js. Topics on: . Read more: React, React Stack, Nextjs, SSG, Next Js|FullStack Wiki by Roger J

not-found.tsx is defined as: ( Next 13 ) Page to export default UI for Catch All Route. Topics on: not-found.tsx is reserved name for Catch All Route in Next 13

npm run build is defined as: to bundle App into final static output for production. Topics on: output files into /build folder. Read more: React, React Stack, C

npm start is defined as: start Local Dev Server & Hot Module Replacement to serve updated changes. Topics on: command runs continuously, stays active in Termina

OLD Redux API is defined as: named import or use Redux._reduxMethod. Topics on: createStore(), getState(). Read more: React, React Stack, Redux, OLD Redux API

On-demand Revalidation is defined as: (feat) to manually purge HTTP Caching for specific ISR Page. Topics on: On-demand Revalidation requires secret token to ac

opt-out of SB telementry. Topics on: must manually opt-out for every setup! Designed to be annoying!, in storybook config element, run with --disable-telemetry

Optional properties of components. Topics on: PropTypes, displayName, defaultProps, contextTypes. Read more: React, React Concepts, Component Based Architecture

Page is defined as: export default FC to display unique UI for Next.js File System Router. Topics on: /pages to export Page in Next 12, /app to export Page in N

page.tsx is defined as: Page export default UI for Next Router vs dirpath, default Server Component - else 'use client' opt-in. Topics on: Next 13 reserve page.

Parent Component is defined as: Composite Component wrap other Component. Topics on: . Read more: React, React Concepts, Component Based Architecture, Component

Parent Component re-renders. Topics on: even pure components will re-render, if its parent component re-renders.. Read more: React, React Concepts, Component Ba

Pass in config to underlying editor. Topics on: hide code mini-map overview, add line-wrap to code. Read more: React, React Stack, Monaco Editor React| Dev Wiki

Passive Effect is defined as: Effect invoked through passive event. Topics on: Dispatch, Render, Commit. Read more: React, React API, Hooks API, Effect Hook, Si

Passive State is defined as: persistant state NOT trigger re-render on update. Topics on: . Read more: React, React API, Hooks API, Stateful Hook, Use Ref, Pass

path is defined as: URL path to <Route>. Topics on: ':_id' '/settings/:_id', '/whatever/*', '/*'. Read more: React, React Stack, React Router Dom, React Router

payload is defined as: to attach data to change state. Topics on: . Read more: React, React Stack, Redux, Redux Pattern, Action, Payload, State | FullStack Wiki

pop is defined as: when user clicks back/forward button. Topics on: . Read more: React, React Stack, React Router Dom, React Router API, React Router V 5, RR Co

Portal is defined as: ReactDOM API Escape Hatch to render children outside Component Hierarchy of Parent Component. Topics on: . Read more: React, React API, Re

Pre-render is defined as: (feat) to render HTML in advance for perf & SEO. Topics on: ISR, Server Side Render. Read more: React, React Stack, Nextjs, Next Conce

Predictable is defined as: redux helps scale App with consistent behaviour by restict data flow into a predictable pattern of dispatch>reducer>state. Topics on:

presets: [] is defined as: to set. Topics on: classic. Read more: React, React Stack, Docusaurus, Docusaurusconfigjs, Config, Presets|FullStack Wiki by Roger J

prop-types. Topics on: development library for React used to type-check data passed to components. Read more: React, React API, Prop Types |FullStack Wiki by RJ

props is defined as: frozen Object of properties; passed as dynamic input from Parent Component to children. Topics on: props are immutable within Component via

props. Topics on: Editor, Diff Editor - for comparing diff between 2 files, Controlled Editor - controlled component !deprecated?. Read more: React, React Stack

PropTypes. Topics on: type evaluation for props entering component in dev mode, Validation of property types, Validator, prop-types library, needed when using T

Provider is defined as: Wrapper FC to provide Context value to all Subscribe children. Topics on: value. Read more: React, React API, Context API, Provider, Wra

Pure Component is defined as: stateless Component that always renders same based on same props input.. Topics on: No state to store changes = No Side Effect. Re

push is defined as: to add link entry to History Stack; trigger on click link or programatically navigate. Topics on: . Read more: React, React Stack, React Rou

React is defined as: Minimalist Lib to build App UI via Declarative Component Based Architecture. Topics on: React Concepts, React API, React Stack, React Snipp

React 16. Topics on: added hooks which enable stateful function components, !added Context API (useContext). Read more: React, React Versions | Full-Stack Wiki

React 17. Topics on: updated JSX transform for Babel & TS compilers. Read more: React, React Versions|FullStack Wiki by Roger J

React 18 is defined as: Major Suspense API release. Topics on: replace ReactDOM.render() with. Read more: React, React Versions, React 18 | FullStack Wiki by RJ

React API is defined as: core lib to expose react functionality. Topics on: Hooks API, ReactDOM API, Suspense API, StrictMode API, experiement_use, Context API,

react boilerplate. Topics on: Redux + Saga, Styled-Components, ESLint, husky. Read more: React, React Stack, CRA, CRA Templates|FullStack Wiki by Roger J

React Concepts is defined as: Definitions on React Concepts, Paradigm & Comparisons to other frameworks. Topics on: Minimalist, High Compat, Declarative, Unidir

React Developer Tools. Topics on: 'Highlight updates when components render'. Read more: React, React Stack, React Dev Tools|FullStack Wiki by Roger J

React DevTools is defined as: Browser Plugin to inspect React App (dev build only!) to view Component Hierarchy, props & state. Topics on: Element Selector Tool

React diff 2 assumptions:. Topics on: Elements of different type produce different trees, Elements with key prop are Stable Variable. Read more: React, React Co

React Element is defined as: immutable stateless building blocks of React apps, returned by components. Topics on: lightweight stateless immutable primitive? in

React Final Form. Topics on: react-final-form flow, Upgrades. Read more: React, React Stack, Redux, Redux Form, React Final Form|FullStack Wiki by Roger J

React Router API is defined as: v6 cur ver. Topics on: React Router FC, React Router Hook, react-router v5. Read more: React, React Stack, React Router Dom, Rea

React Router Custom hooks. Topics on: useHistory, useLocation, useParams, useRouteMatch. Read more: React, React Stack, React Router Dom, React Router API, Reac

React Router FC is defined as: React Router API prebuild FC. Topics on: <BrowserRouter>, <Routes>, <Outlet>, <Navigate>, <Link>. Read more: React, React Stack,

React Router Flow. Topics on: install, import, Config routes, Link to navigate, useNavigate to redirect. Read more: React, React Stack, React Router Dom, React

React Router Hook is defined as: React Router API Library Hook. Topics on: useSearchParams(), useLocation(), useParams(), useNavigate(), useRoutes(), useHistory

React Router Patterns is defined as: Design Pattern for react router & snippet examples. Topics on: Lazy Load Routes, Custom Link, Route Config, Recursive Route

React Scheduler is defined as: Suspense API intelligent granular scheduler to pause/run task by priority. Topics on: React Scheduler will pause/discard task for

React Snippets is defined as: useful React custom hooks/patterns. Topics on: <RequireAuth>, useActions(), !snippet Hello World direct from html filereactElement

React Stack is defined as: Broader React Ecosystem, third party libraries & frameworks. Topics on: @apollo/client, @monaco-editor/react, CRA, docusaurus, esbuil

React Versions is defined as: breaking change, major features. Topics on: React 16, React 17, React 18. Read more: React, React Versions|FullStack Wiki by Roger

React vs Other Frameworks. Topics on: Angular more opinionated, complete fullstack design solutions (for design data fetch, forms, routing, deps injection, inte

react-credit-cards is defined as: React Stack with CSS animated card payment UI form. 3Y abandonware 👎. Topics on: Live demo:. Read more: React, React Stack, R

react-dom/client is defined as: React 18+ Package to render App. Topics on: react-dom/client exports 2 Methods. Read more: React, React API, React DOM API, Reac

react-dom/client exports 2 Methods. Topics on: createRoot(), hydrateRoot(). Read more: React, React API, React DOM API, React Dom Client|FullStack Wiki by Roger

react-dom/server is defined as: Package to import ReactDOMServer object for access to render components to static markup. Topics on: ReactDOMServer. Read more:

react-icons is defined as: React Stack with general emoji icon SVG graphics. Topics on: . Read more: React, React Stack, SVG|FullStack Wiki by Roger J

React-Live interactive editor. Topics on: must add @docusaurus/theme-common for theme-live-editor to work!, YUCK! pnpm bugs out for live-editor - use npm ins

react-markdown is defined as: React Stack FC Wrapper to render MDX extends with plugins. Topics on: react-markdown + syntax-highlighter. Read more: React, React

react-mosaic is defined as: React Stack to show split window UI. Topics on: Live demo:. Read more: React, React Stack, React Mosaic, UI |FullStack Wiki by Roger

react-native is defined as: React Stack to build UI for mobile OS (Android & iOS). Topics on: React library for native mobile platforms. Read more: React, React

react-query is defined as: React Stack FCS data. Topics on: FCS. Read more: React, React Stack, React Query, FCS|FullStack Wiki by Roger J

react-redux is defined as: sub-library with React Binding for redux. Topics on: Redux flow, redux-form flow, useDispatch(), useSelector(), react-redux at 6.5M w

react-router v5. Topics on: <Switch>, React Router Flow, withRouter() gives access to history object properties, RR concepts:, withRouter(), React Router Custom

react-router-dom is defined as: React Lib for Routing Primitive to Client Routing & Server Side Render in Declarative Composable way. Topics on: react-router, R

react-split is defined as: React Stack to render 1-D split panel UI; react-wrapper for split.js. Topics on: <Split>. Read more: React, React Stack, React Split,

react-syntax-highlighter is defined as: React Stack Syntax Highlighter to style code (highlight syntax, background, theme). Topics on: . Read more: React, React

React.Component is defined as: base Abstract Class that provides render() method to return React Element(s), state & Lifecycle Methods. Topics on: !deprecated c

React.createElement(). Topics on: type, props, children, transpiles to..., React.createElement() signature, ReactDOM.render() signature, React createElement() &

React.Fragment is defined as: empty React placeholder container w/o 'physical' HTMLElement add to final HTML. Topics on: <></> shorthand JS Syntax cannot accept

React.PureComponent. Topics on: base class. Read more: React, React Concepts, Component Based Architecture, Component, CC, Declare A Class With Props | Dev Wiki

ReactDOM is defined as: Renderer for React, to handle DOM API updates. Topics on: Renderer. Read more: React, React Concepts, VDOM, React DOM, Renderer, DOM A

ReactDOM API is defined as: core react library to render VDOM. Topics on: react-dom/client, react-dom/server, Escape Hatch, createPortal(), flushSync(), render(

ReactDOMServer is defined as: ReactDOM API Interface Object to render FC to static HTML. Topics on: ReactDOMServer method subdivide by compat with Node.js strea

recoil is defined as: react state management lib FB experimental FOSS project. Topics on: recoil 364K vs @reduxjs/toolkit 2.2M vs redux 8.8M Weekly Downloads.

Reconciliation is defined as: (process) (before Commit Phase) to compare Fiber stored in previous update vs new render. Topics on: to efficiently decide which u

Reduce is defined as: (process) to generate new state based on current state & some Action payload. Topics on: . Read more: React, React Stack, Redux, Redux Pat

Reducer is defined as: function to Reduce to new state value from Action input. Topics on: Reduce. Read more: React, React Stack, Redux, Redux Pattern, Reducer,

redux is defined as: (Design Pattern) to colocate state in global external central store, to control data flow with predictable scalable pattern of Dispatch Fun

redux alternatives. Topics on: MobX, React Query. Read more: React, React Stack, Redux|FullStack Wiki by Roger J

Redux Concepts. Topics on: Redux Store, Root Reducer, Redux Reducer, Dispatch, Subscriber, Redux Middleware. Read more: React, React Stack, Redux, Redux Concept

Redux Definition. Topics on: Predictable, Centralized, Time-Travel, Standalone, Debuggable, Flexible. Read more: React, React Stack, Redux, Redux Definition

Redux flow. Topics on: Classic Redux Flow, Classic Redux with hooks, Redux Toolkit steps. Read more: React, React Stack, Redux, React Redux, Redux Flow|Dev Wiki

Redux Folder Structure. Topics on: src > state OR src > redux, Separate redux type to folder. Read more: React, React Stack, Redux, Redux Folder Structure| Wiki

Redux Form v8.3.0. Topics on: redux-form flow. Read more: React, React Stack, Redux, Redux Form, Redux Form V 830|FullStack Wiki by Roger J

Redux Middleware is defined as: Middleware to enhance/override store methods. Topics on: . Read more: React, React Stack, Redux, Redux Concepts, Middleware|Wiki

Redux Pattern. Topics on: Initial State, Action, Dispatch Function, Reducer. Read more: React, React Stack, Redux, Redux Pattern|FullStack Wiki by Roger J

Redux Reducer is defined as: pass initState & action object. Topics on: initState. Read more: React, React Stack, Redux, Redux Concepts, Redux Reducer| Dev Wiki

Redux Store is defined as: central global container to manage App state for redux. Topics on: Redux Store contains special methods to mutate state - only to be

Redux Toolkit steps. Topics on: create src/state/store.ts with configureStore(), Provide store to <App>, Create reducers inside newer 'slice' in src/state/reduc

redux-form. Topics on: Redux Form v8.3.0, React Final Form. Read more: React, React Stack, Redux, Redux Form|FullStack Wiki by Roger J

redux-form flow. Topics on: import redux & redux form, Validater, export reduxForm. Read more: React, React Stack, Redux, React Redux, Redux Form Flow| Dev Wiki

redux-form flow. Topics on: . Read more: React, React Stack, Redux, Redux Form, Redux Form V 830, Redux Form Flow|FullStack Wiki by Roger J

Refactoring CC to FC. Topics on: !refactor Render only, !refactor Class with pure helper, !refactor class with non-pure method, !refactor constructor(props), !r

relay is defined as: Declarative React Stack to colocate & mutate data via GraphQL. Topics on: . Read more: React, React Stack, Relay, Declarative, Graph QL

Render Phase is defined as: (process) to Async check all elements, one by one, collect changes. Topics on: processes each Fiber as unit of work via interal func

Render Props is defined as: Providing function as props to render JSX. Topics on: FC can just pass full FC as props instead of Render Props - to simply/optimize

render() is defined as: replace by createRoot(). ReactDOM API function to render element to DOM API inside container - for Client Component only. Topics on: r

render() is defined as: to create & manages component. Topics on: called with component to render and container, container. Read more: React, React API, React D

Renderer. Topics on: . Read more: React, React Concepts, VDOM, React DOM, Renderer|FullStack Wiki by Roger J

replace is defined as: to replace current entry in History Stack. Topics on: . Read more: React, React Stack, React Router Dom, React Router API, React Router V

replace ReactDOM.render() with. Topics on: for TypeScript - apply ! operator. Read more: React, React Versions, React 18|FullStack Wiki by Roger J

req swizzle to customize?! is defined as: req Swizzling to reconfig certain UI - to eject theme under new dir src/theme to customize - pain in the A!. Topics on

Revalidation is defined as: beta.nextjs.org/docs/data fetching/revalidating. Topics on: Background Revalidation, On-demand Revalidation. Read more: React, React

Root is defined as: First Node in Tree/Subtree. Topics on: . Read more: React, React Stack, Nextjs, Next Concepts, Tree, Root, Subtree|FullStack Wiki by Roger J

Root Layout is defined as: top-level layout.tsx to share across all Page in App, to define <html> & <body>. Topics on: Root Layout replaces _app.tsx & _document

Route Config is defined as: to colocate all routes into single object (for legacy reasons??). Topics on: . Read more: React, React Stack, React Router Dom, Reac

router() is defined as: Imperative fn return by useRouter(). Topics on: (default) to name as router() but can be any name, push, pop. Read more: React, React St

Routing. Topics on: URL not the same as route in React Router, Client Side Routing (Client Routing) is possible due to HTML document links and browser handling

RR concepts:. Topics on: History & Locations, Locations, Matching, Navigating, Routing, Segment, Path Pattern, Dynamic Segement, URL Params, Router, Router Conf

Run Effect + Cleanup Function on specific renders is defined as: call useEffect() with property in Deps Array & Cleanup Function. Topics on: . Read more: React,

Run Effect on specific renders is defined as: call useEffect() with relevant data in Deps Array. Topics on: only update when title changes; where title change i

Run Effect once onMount is defined as: call useEffect() with empty Deps Array. Topics on: . Read more: React, React API, Hooks API, Effect Hook, Use Effect, Dep

Run Effect once onMount + Cleanup Function is defined as: call useEffect() with empty Deps Array & return Cleanup Function. Topics on: return () ⇒ clearInterval

Run Effect with async await Fetch API. Topics on: ⚠ Effect callbacks are synchronous to prevent race conditions. Put the asyn function inside.. Read more: Reac

sb parameters is defined as: to control storybook feature/addon, via actions. Topics on: actions. Read more: React, React Stack, Storybook, Setup Storybook, Sto

search is defined as: plugin to Algolia via docsearch || typesense. Topics on: docusaurus + typesense setup, docusaurus + algolia setup. Read more: React, React

Separate redux type to folder. Topics on: import each different redux type with index.ts, Solves spaghetti import statements!, easier to import by simply refere

Server Component is defined as: FC to Server Side Render on Backend & serve Static Resource to Thin Client. Topics on: . Read more: React, React Concepts, Compo

Server Component > Client Component?. Topics on: to reduce bundle size, to restrict code, to eliminate data fetch. Read more: React, React Concepts, Component B

Server Component vs Client Component is defined as: how to decide when to use client or server components?. Topics on: Client Component > Server Component, Serv

Server Runtime is defined as: Node.js & Edge Runtime. Topics on: Edge Runtime, (default) /app use Node.js. Read more: React, React Stack, Nextjs, Next Concepts,

Server Side Render is defined as: to Pre-render Static Content on Server Backend & serve to Thin Client with each request. Topics on: . Read more: React, React

setter is defined as: function to set new value; !convention prefix set* to value name. Topics on: !gotcha Referential Equality - do not mutate Array or Object

setup storybook. Topics on: opt-out of SB telementry, src/stories, .storybook, clone template using degit to, init latest storybook, storybook + next 12 setup,

Shared Layout is defined as: UI to share mutliple Page via children, to preserve state & not trigger re-render. Topics on: Root Layout. Read more: React, React

shiki is defined as: . Topics on: shiki for Markdown, shiki for TS. Read more: React, React Stack|FullStack Wiki by Roger J

Side Effect is defined as: Effect with external Hidden Dependency that read/writes to External System. Topics on: External System, Passive Effect, Hidden Depend

Sidebar is defined as: autogen from /docs folder. Topics on: . Read more: React, React Stack, Docusaurus, Docusaurus Concepts|FullStack Wiki by Roger J

sidebars.js is defined as: root level .js to explicitly add sidebars. Topics on: . Read more: React, React Stack, Docusaurus, Docusaurus Concepts, Docusaurus Fi

src > state OR src > redux. Topics on: add store to, add all reducers, add all actions to, add all action types to, add all action creators to, centralise main

src/components/HomepageFeatures/index.tsx is defined as: docusaurus FC for root home page (classic preset). Topics on: FeatureList[]. Read more: React, React St

Stable Variable is defined as: Variable constant with each render. Topics on: . Read more: React, React API, Hooks API, Deps Array, Variable | Full-Stack Wiki

Stack Reconciler is defined as: deprecated Reconciliation Algorithm used for VDOM from React 15.. Topics on: . Read more: React, React Concepts, VDOM, Fiber, Re

Stale is defined as: when Static Content no longer up to date. Topics on: . Read more: React, React Stack, Nextjs, Next Concepts, Pre Render, ISR, Stale, Static

state is defined as: persistent Snapshot of info that App can access at given point in time. Topics on: piece of memory stored insider a Fiber, Component State,

state can be mutable or immutable. Topics on: Immutable state, Immutable data structure, mutable data structure, mutable state. Read more: React, React Concepts

Stateful Hook is defined as: (typeof) Hook to add state to FC. Topics on: useState(), useReducer(), useRef(), useContext(), userDeferredvalue(), useTransition()

stateless is defined as: of Entity lacking state. Topics on: stateful Component can update itself based on internal triggers & therefore independent of its cont

static initial values for useState(). Topics on: true/false, empty string '', null. Read more: React, React API, Hooks API, Stateful Hook, Use State, Initial

Story is defined as: export default Object to Declarative render FC snapshot with specific key state to dev/test/doc. Topics on: title & component req fields -

Story Parameter is defined as: static named metadata for Story to control beavior of Storybook Addon/core features. Topics on: . Read more: React, React Stack,

storybook is defined as: popular Frontend Dev tool to isolate UI to doc/showcase/test, detangle Business Logic/state/Context. Topics on: Storybook features, Sto

storybook + msw setup. Topics on: add msw to storybook to simulate Online API, create genertic Service Worker in public folder, update .storybook/preview.js to

storybook + next 12 setup. Topics on: extra config to setup next.js for storybook to run Page in isolation from next integrations - must serve next public dir a

storybook + RTK setup. Topics on: use @reduxjs/toolkit with storybook to add state to isolated CSF, add rtk deps, setup store.js & connect to FC, wire redux con

Storybook Addon is defined as: Plugin extends storybook UI & behaviour. to help prototype, test & doc. Topics on: to install essential addons, @storybook/addon-

Storybook Concurrent Explorer is defined as: storybook loca dev server with autogen web page to view, edit & test UI in browser. built-in search. Topics on: Sto

Storybook features. Topics on: storybook is FOSS - with Chromatic fremium version for better automation/integration tooling, Disable Storybook telemetry, Storyb

StrictMode API is defined as: React API to highlight potential problems ie unsafe lifecycles, deprecated legacy API, etc. Topics on: <StrictMode>. Read more: Re

structure of component. Topics on: Composable, Component structure diagram, uses JSX to describe UI to return as HTML, Component Hierarchy, React Element, Optio

style HTML Attribute is Object in {{...}}. Topics on: JSX Object Literal, React transform attributes to Object Literal instead of string for faster perf!. Read

Subscribe is defined as: to access Context from closest Parent Provider in Component Hierarchy. Topics on: . Read more: React, React API, Context API, Subscribe

Subtree is defined as: Part of Tree, from Root to Leaf. Topics on: . Read more: React, React Stack, Nextjs, Next Concepts, Tree, Subtree, Root, Leaf | Dev Wiki

Suspense API is defined as: React API to defer render for FC. Topics on: <Suspense>, Lazy(), Suspense Boundary, Suspense API splits VDOM pipeline into smaller u

Suspense Boundary is defined as: Component Hierarchy Wrapper by <Suspense> to suspend render children with fallback until ready. Topics on: . Read more: React,

SWR is defined as: React Stack to Data Fetch for client-side, handle Caching/Revalidation/Retries Front-End App (JS). Topics on: . Read more: React, React Stack

Syntax Highlighter. Topics on: react-syntax-highlighter, shiki. Read more: React, React Stack, Syntax Highlighter|FullStack Wiki by Roger J

Synthetic Event is defined as: Wrapper over event object for xplat browser compat. Topics on: . Read more: React, React Concepts, DOM Abstractions, Wrapper|Wiki

this.props is defined as: frozen object for accessing properties inside a Component. Topics on: this.props is immutable by using Object.freeze(). Read more: Rea

this.state is defined as: to initialize state in CC. Topics on: . Read more: React, React Concepts, Component Based Architecture, Component, CC, Declare A Class

Thoughts on RTK Migration. Topics on: reducer has been rebranded to 'slice' to pointlessly confuse people, keep everything named as slice or reducer to avoid co

Time-Travel is defined as: (feat) to revisit redux state history. Topics on: . Read more: React, React Stack, Redux, Redux Definition, State | Full-Stack Wiki

title is defined as: name of component to display in Storybook Concurrent Explorer - can be anything. Topics on: . Read more: React, React Stack, Storybook, Sto

To add CSS. Topics on: Import from /pages/_app.tsx, import from /node_modules CRA. Read more: React, React Stack, Nextjs, Next Setup|FullStack Wiki by Roger J

Transpile is defined as: (process) to translate Source Code into some other Source Code. Topics on: Babel. Read more: React, React API, JSX, Transpile, Source C

Tree is defined as: Next.js folder struct to def Hierachy for File System Router. Topics on: Subtree, Root, Leaf. Read more: React, React Stack, Nextjs, Next Co

type is defined as: to describe Action to change state. Topics on: . Read more: React, React Stack, Redux, Redux Pattern, Action, Type, State | Full-Stack Wiki

UI state is defined as: current state of UI Component; intermittent data to help render app that's not persisted. Topics on: local variables inside Component. R

Uncontrolled Component is defined as: Component with state manage by DOM API NOT ReactDOM. Topics on: . Read more: React, React Concepts, Component Based Arch

Unmount is defined as: (process) to remove UI from DOM API. Topics on: . Read more: React, React Concepts, Component Based Architecture, Component, Component Li

unoptimized is defined as: props to set <Image> to serve unoptimized Image Element (for compat with storybook). Topics on: . Read more: React, React Stack, Next

Upgrades. Topics on: Pure JS, Smaller file size, <FormSpy/>. Read more: React, React Stack, Redux, Redux Form, React Final Form, Upgrades | FullStack Wiki by RJ

useAppDispatch() is defined as: TS typed version of useDispatch() || recommended but pointless. Topics on: . Read more: React, React Stack, Redux, Reduxjs Toolk

useAppSelector() is defined as: TS Typed version for useSelector() || recommended but pointless - just export useSelector as typed version. Topics on: . Read mo

useAsync() is defined as: async Custom Hook to return value, error, status of Data Fetch. Topics on: . Read more: React, React API, Hooks API, Custom Hook, Asyn

useAuth() is defined as: async Custom Hook to get Auth state from Backend/Online API. Topics on: Example FC. Read more: React, React API, Hooks API, Custom Hook

useCallback() is defined as: Memoizing Hook to Memoization Callback Function for given Deps Array. Topics on: extension of useMemo() equivalent to, !snippet use

useContext() is defined as: Stateful Hook to subscribe to Context persist state in app-wide store in Parent Component. Topics on: . Read more: React, React API,

useEffect() is defined as: Hook to run Effect in FC at specific stage of Component Lifecycle, set by Deps Array. Topics on: Deps Array as 2nd Argument to useEff

useEventListener() is defined as: Custom Hook to Refactor event listeners. Topics on: . Read more: React, React API, Hooks API, Custom Hook, Use Event Listener,

useHistory(). Topics on: . Read more: React, React Stack, React Router Dom, React Router API, React Router Hook, Use History|FullStack Wiki by Roger J

useId() is defined as: Memoizing Hook to create stable UID DOM identifier BUT can clash with server-side instance. Topics on: for compat with non-human User Age

useLayoutEffect() is defined as: Hook variant of useEffect(), to call Effect as soon as DOM API generated BEFORE UI repaints to DOM API. Topics on: Displays

useLocalStorage() is defined as: Custom Hook to. Topics on: . Read more: React, React API, Hooks API, Custom Hook|FullStack Wiki by Roger J

useLocation() is defined as: redundant? React Router Hook to return Location. Topics on: . Read more: React, React Stack, React Router Dom, React Router API, Re

useMedia(). Topics on: . Read more: React, React API, Hooks API, Custom Hook, Use Media|FullStack Wiki by Roger J

useMemo() is defined as: Memoizing Hook to Memoization entire Component, some JSX or props, based on Deps Array change. Topics on: Memoization of Component, Mem

useNavigate() is defined as: React Router Hook to return Imperative navigate fn. Topics on: . Read more: React, React Stack, React Router Dom, React Router API,

useOnClickOutside() is defined as: Custom Hook to detect click outside a specific element. Topics on: . Read more: React, React API, Hooks API, Custom Hook, Use

useOnScreen() is defined as: Custom Hook to return boolean to check if node (as ref) is visible on Viewport; Abstraction Intersection Observer API Web API. Top

useParams() is defined as: React Router Hook to return { URL Parameter } set via ':_id' '/settings/:_id' in path. Topics on: . Read more: React, React Stack, Re

usePrevious() is defined as: Custom Hook to get previous value of props or state. Topics on: . Read more: React, React API, Hooks API, Custom Hook, Use Previous

useReducer() is defined as: Stateful Hook with logic to update new state from current state & payload via redux. Topics on: useReducer() for updating multiple p

useRef() is defined as: Stateful Hook to persist Passive State Variable across renders in FC, as ref handle Escape Hatch to DOM API elements. Topics on: useRe

useRouteMatch(). Topics on: . Read more: React, React Stack, React Router Dom, React Router API, React Router Hook, Use Route Match|FullStack Wiki by Roger J

useRouter() is defined as: Custom Hook to combine useParams(), useLocation(), useHistory() & useRouteMatch(). Topics on: boilerplate snippet for custom useRoute

useRouter() is defined as: Next Library Hook to return router function to Imperative navigate within Page. Topics on: router(). Read more: React, React Stack, N

useScript() is defined as: Custom Hook to Runtime load external Script. Topics on: . Read more: React, React API, Hooks API, Custom Hook, Runtime, Script | Wiki

useSearchParams() is defined as: React Router Hook to return [ searchParams ] with method to .get() URL Parameter values. Topics on: to Wrapper URLSearchParams

useSelector() is defined as: OLD Redux API Library Hook to select piece of state from Redux Store. rep by useAppSelector(). Topics on: avoid Async logic inside

useState() is defined as: Stateful Hook to persist single state value in FC. Topics on: const [_value, _setter] = useState(initial), Lazy Initial value, !flow d

useState() vs CC. Topics on: CC can only have ONE state of Object type, CC always re-render if updated; even if nothing changed, CC has extends React.PureCompon

useToggle() is defined as: Custom Hook to flip boolean Parameter. Topics on: . Read more: React, React API, Hooks API, Custom Hook, Use Toggle, Boolean, Paramet

Validation of property types. Topics on: will not break app, just warning in console log. Read more: React, React Concepts, Component Based Architecture, Compon

value is defined as: name for state being tracked. Topics on: when useState called, React checks if value & only re-render if value changes. Read more: React, R

VDOM is defined as: Intermediate Abstraction layer between Source Code & DOM API , data structure to mirror DOM API comprised of Fiber (React Element). Topic

VDOM Diffing Flow. Topics on: Create & store VDOM & DOM Tree in Memory, Update state changes in VDOM, Reconciliation of VDOM vs DOM API. Read more: React, React

Vercel is defined as: PaaS dev of Next.js, parcel, Serverless JAM CDN. Topics on: static file hosting does not count to 32 build/hr limit, automatic Let's Encry

What are Components used for?. Topics on: Encapsulated units of functionality, uses properties & state to render UI output, Primary unit in React, allows design

why are hooks useful?. Topics on: allows reuse of stateful logic between components w/o needing to change Component Hierarchy, allows splitting down component

wire redux context to _myFC.stories.js. Topics on: create mock data for redux store including reducer actions. Read more: React, React Stack, Storybook, Setup S

withRouter(). Topics on: . Read more: React, React Stack, React Router Dom, React Router API, React Router V 5|FullStack Wiki by Roger J