React
71 flashcards · Programming Languages · by Orlando Flores
React puts your updater functions in a ...
queue
is a special type of effect Hook that is invoked before the browser repaints the screen
useLayoutEffect
useLayoutEffect is a special type of effect Hook that is invoked before the browser ... the screen
repaints
This Hook is the same as the useEffect Hook except that it fires before the browser repaints the screen to measure the layout.
useLayoutEffect
it is helpful for extracting the state management out of the component.
useReducer
renders a client–side SPA on the server and then sends a fully rendered HTML page to the client
SSR
useInsertionEffect, fires before React makes changes to the DOM, such as adding ... CSS
dynamic
This Hook fires before React makes changes to the DOM, such as adding dynamic CSS
useInsertionEffect
Prop ... refers to sending props from a higher–level component to a lower–level component
drilling
... components are components that render the same output for the same state and props.
Pure
It uses reusable or composable UI ... to develop the view at a fast pace (DRY) principle
components
It follows a ... data flow or one–way data binding in which the data flows from parent to child but not vice versa.
unidirectional
It supports ..., which offers quick initial page load times and SEO–friendly applications compared to CSR.
SSR
SyntheticEvent is an object that wraps the native Event in React, like making sure you have the same behavior across ...
browsers
virtual DOM is an in–..., lightweight virtual representation of Real DOM
memory
... DOM is a web component technology that’s designed primarily for scoping variables and CSS
Shadow
Ref is the shorthand for a ... to an element or a component.
reference
Refs are used to ... DOM nodes or React elements that are created in the render method.
access
DOM ... is taken care of by the React library under the hood
manipulation
Ref is the shorthand for a ... to an element or a component.
reference
Refs are used to access DOM ... or React elements that are created in the render method.
nodes
Refs are used to access DOM nodes or React elements that are created in the ... method.
render
The main purpose of ... is to allow your components to access basic global data
context
downloads a minimal HTML page and it renders using JavaScript
CSR
The data fetching, templating, and routing processes are handled on the client side– that is, by the browser.
CSR
converts HTML files on the server into a fully rendered HTML page that includes the data for the client
SSR
isolate the stateful logic from the components
hooks
The Hooks feature is a way for your function components to ... into React’s life cycle and state
hook
... Hooks at the top level only
Call
Call Hooks from ... functions only
React
You cannot write Hooks inside ... components
class
Hooks have been created for the ... components only
function
is used to add the state to a function component
usestate
The state ... function doesn’t update the current state in the already executing code.
setter
The state setter function doesn’t ... the current state in the already executing code.
update
In this code, a => a + 1 is an ... function.
updater
const [state, dispatch] = useReducer(..., initialCount, init);
reducer
const [state, dispatch] = useReducer(reducer, ..., init);
initialCount
const [state, dispatch] = useReducer(reducer, initialCount, ...);
init
const [..., dispatch] = useReducer(reducer, initialCount, init);
state
const [state, ...] = useReducer(reducer, initialCount, init);
dispatch
There is no restriction on the nesting level or number of times you override the context using a ...
provider
There is no restriction on the nesting level or number of times you ... the context using a provider.
override
This is a frequently used Hook to connect a component to an external system.
useEffect
... Hook is used to cache the result of an expensive calculation between re–renders.
useMemo
The useMememo() Hook returns the value of the ... calculation by accepting two arguments.
expensive
It uses a ... DOM instead of Real DOM since Real DOM manipulations are expensive.
virtual
An ... Order Component is a function that takes a component and returns a new component.
High
A React ... is a syntax that allows you to wrap or group a list of child elements to a React component without the need to add an extra node to the DOM.
fragment
are arguments that appear in the form of either individual values or an object holding a set of values that are passed into components.
props
Props, are ... that appear in the form of either individual values or an object holding a set of values that are passed into components.
arguments
Props are ... (read–only) in nature and trying to modify these values will throw an error.
immutable
... is an in–built JavaScript object where you store property values that belong to the component.
State
State is mutable and ... asynchronously
changed
Managed by the component
state
Props are ... from the parent component to the child component
passed
State cannot make components ...
reusable
State is used for rendering ... changes
dynamic
Props are Read–... and immutable
only
State cannot be accessed by ... components
child
Props are accessed by ... components
child
Props make components ...
reusable
Props are used for ... between components
communication
When you mutate an object directly, React doesn’t recognize the change, and no re–... occurs.
render
Instead of directly ... an object in state, create a new one, and then set the state to use that copy
mutating
Always use the ...–setting function (e.g., setPosition) to trigger a re–render with the updated state.
state
Always use the state–setting function (e.g., setPosition) to trigger a re–... with the updated state.
render
State ... in React are asynchronous.
updates
React batches state updates for ... reasons.
performance
SyntheticEvent is an object that wraps the native Event in React, like making sure you have the same ... across browsers.
behavior
SyntheticEvent is an object that ... the native Event in React, like making sure you have the same behavior across browsers.
wraps