106 docs tagged with "React API"

!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

<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

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

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:

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

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

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

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

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 |

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

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 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

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

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

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

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

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,

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

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

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

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

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

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

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

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

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() 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

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

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

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

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

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

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

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

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 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-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.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

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

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

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

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

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

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

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

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

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

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

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,

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

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,

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

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

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

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

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

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

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

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

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