React (Basic) Flashcards
To add a state variable, import useS_._. from React at the top of the file
To add a state variable, import useState from React at the top of the file
The idea of JSX is quite similar to many t____ing languages
The idea of JSX is quite similar to many templating languages
effect hooks are precisely the right tool to use when f____ing data from a server.
effect hooks are precisely the right tool to use when fetching data from a server.
The useState function (and useEffect) must not be called from inside of a L____, a c________ expression, or any place that is not a function defining a com______
The useState function (and useEffect) must not be called from inside of a loop, a conditional expression, or any place that is not a function defining a component
The axios ‘get’ method returns a p_____
The axios get method returns a promise
a call to a state-updating function triggers the re-r________-ing of the component
a call to a state-updating function triggers the re-rendering of the component
The second parameter of useEffect is used to specify how o____ the effect is run. If the second parameter is an empty array [], then the effect is only run along with the f____ render of the component.
The second parameter of useEffect is used to specify how often the effect is run. If the second parameter is an empty array [], then the effect is only run along with the first render of the component.
All events propagate in React except onS_._.., which only works on the JSX tag you attach it to.
All events propagate in React except onScroll, which only works on the JSX tag you attach it to.
The browser gets the JavaScript from the React d__ s______, which is the application that runs after running the command npm run dev
The browser gets the JavaScript from the React dev server, which is the application that runs after running the command npm run dev
Functions that create actions are called a____ c_____s.
Functions that create actions are called action creators.
axios is installed as a runtime dependency of the application because the execution of the program requires the existence of the l_____
axios is installed as a runtime dependency of the application because the execution of the program requires the existence of the library
React treats a component defined inside of another component as a n____ component in every render
React treats a component defined inside of another component as a new component in every render
the content of a React component (usually) needs to contain one r.._ element.
the content of a React component (usually) needs to contain one root element.
Effects let a component connect to and synchronize with ex____ systems
Effects let a component connect to and synchronize with external systems
_ _ _ is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file.
JSX is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file.
One best practice in React is to L____ the s____ up in the component hierarchy.
One best practice in React is to lift the state up in the component hierarchy.
In React, it’s conventional to use ..Something names for props which take functions which handle events and h____Something for the actual function definitions which handle those events.”
In React, it’s conventional to use onSomething names for props which take functions which handle events and handleSomething for the actual function definitions which handle those events.”
rendering completely different React elements depending on the state of the application is called c________ rendering
rendering completely different React elements depending on the state of the application is called conditional rendering
Under the hood, JSX returned by React components is c________ed into JavaScript.
Under the hood, JSX returned by React components is compiled into JavaScript.
Local variables don’t persist between r________s.
Local variables don’t persist between renders
An event handler is supposed to be either a f________ or a f________ reference
An event handler is supposed to be either a function or a function reference
useEffect takes _ parameters
useEffect takes 2 parameters
When a software developer uses React, they rarely or never directly manipulate the D._
When a software developer uses React, they rarely or never directly manipulate the DOM
I_._x as a key is an anti-pattern
Index as a key is an anti-pattern
Effects are an “es____ h____” from the React paradigm.
Effects are an “escape hatch” from the React paradigm.
React treats a component defined inside of another component as a new component in every r_______
React treats a component defined inside of another component as a new component in every render
JSX is a s_____ extension for JavaScript that lets you write HTML-like markup inside a JavaScript file.
JSX is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file.
Unlike the “normal” props we’ve seen before, c________ is automatically added by React and always exists.
Unlike the “normal” props we’ve seen before, children is automatically added by React and always exists.
Local variables don’t p____ between renders.
Local variables don’t persist between renders.
Remember that the correct way of updating state stored in complex data structures like objects and arrays is to make a c____ of the s____
Remember that the correct way of updating state stored in complex data structures like objects and arrays is to make a copy of the state
middleware functions are called in the order that they’re encountered by the JavaScript e______
middleware functions are called in the order that they’re encountered by the JavaScript engine
By default, React DOM es_._.s any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that’s not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent XSS (cross-site-scripting) attacks.
By default, React DOM escapes any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that’s not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent XSS (cross-site-scripting) attacks.
E.._._s are an “escape hatch” from the React paradigm.
Effects are an “escape hatch” from the React paradigm.
Actions are o_._._s, which have at least a field determining the type of the action
Actions are objects, which have at least a field determining the type of the action
Never d____ components inside of other components
Never define components inside of other components
Event handlers will also catch events from any c_____ your component might have
Event handlers will also catch events from any children your component might have
The optimization process for JavaScript files is called m_______.
The optimization process for JavaScript files is called minification.
a k._ is the only thing React uses to identify DOM elements
a key is the only thing React uses to identify DOM elements
Changing state has to always be done by setting the state to a new o______
Changing state has to always be done by setting the state to a new object
“Objects are not valid as a React c____”
Objects are not valid as a React child
state update in React happens a____________ly
state update in React happens asynchronously
Don’t use Effects to orchestrate the d____ f____ of your application
Don’t use Effects to orchestrate the data flow of your application
Don’t use E.._._s to orchestrate the data flow of your application
Don’t use Effects to orchestrate the data flow of your application
Projects created with create-react-app or vite are configured to c____ automatically.
Projects created with create-react-app or vite are configured to compile automatically.
If you always update two or more state variables at the same time, consider m____-ing them into a single s____ v_____
If you always update two or more state variables at the same time, consider merging them into a single state variable
Avoid deeply n._.ed state
Avoid deeply nested state
A deeply h_____al state is inconvenient to update. Whenever possible, structure the state in a f____ manner.
A deeply hierarchical state is inconvenient to update. Whenever possible, structure the state in a flat manner.
Avoid r_____ state
Avoid redundant state;
If you can calculate some information from the component’s props or its existing state variables during rendering, you should not put that information into that component’s state.
If the value of some state can be derived from another, derive it dynamically so that you don’t have to coordinate the state to keep it up to date.
Avoid c_____s in state
Avoid contradictions in state;
When the state is structured in a way that several pieces of state may contradict and “disagree” with each other, you leave room for mistakes. Try to avoid this.
Avoid d______ in state
Avoid duplication in state;
When the same data is duplicated between multiple state variables, or within nested objects, it is difficult to keep them in sync. Reduce duplication when you can.
When the state references another state or a part of another state, the component information will not update correctly. The state variable will not reference the current state of the component because each update returns a new reference!
useCallback m________s a function and returns the same instance of the function unless its dependencies change.
useCallback memoizes a function and returns the same instance of the function unless its dependencies change.
This prevents unnecessary re-renders of memoized child components, preserving the performance benefits of React.memo.
The createContext function is used to create a context o________, which does not hold any information itself but represents the context that other components can read from or provide to.
The createContext function is used to create a context object, which does not hold any information itself but represents the context that other components can read from or provide to.
A react hook that accepts a context object and returns the value provided by the context provider. If there is no context provider it will receive the context object default value.
useContext
The useE____ hook is a way that we can register a callback function to be invoked when a state variable changes.
The useEffect hook is a way that we can register a callback function to be invoked when a state variable changes.
useE____ is a type of react hook that accepts two arguments, a callback function and an optional argument, an array of d____________s.
useEffect is a type of react hook that accepts two arguments, a callback function and an optional argument, an array of dependencies.
useEffect is most commonly used to make requests to a s________ but one can also think of it as a means to s____ state between a react component and some other external system.
useEffect is most commonly used to make requests to a server but one can also think of it as a means to sync state between a react component and some other external system.
The dependencies of useEffect trigger its execution only when their values c______
The dependencies of useEffect trigger its execution only when their values change
useEffect dependencies are typically s____ variables (variables created by useState)
useEffect dependencies are typically state variables (variables created by useState)
When an empty dependency array is provided as a second argument the callback function provided to useEffect is only run o____ after the component’s first execution.
When an empty dependency array is provided as a second argument the callback function provided to useEffect is only run once after the component’s first execution.
“Context in React lets you supply child components with g_____ data, no matter how deep they are in the components tree.”
“Context in React lets you supply child components with global data, no matter how deep they are in the components tree.”
“Dis________-ing” basically means ‘a request to update the state’
Dispatching basically means ‘a request to update the state’
- A pure function that accepts 2 parameters: the current state and an action object
- Must update state in an immutable manner AND return the new state
Reducer function
Sometimes you need to maintain a single function inst_________ between renderings
Sometimes you need to maintain a single function instance between renderings
In React we have to use the classN___ attribute instead of the class attribute.
In React we have to use the className attribute instead of the class attribute.
Edit src/App.jsx and save to test HMR.
HMR stands for what?
Hot Module Replacement
https://medium.com/@oresoftware/hot-module-replacement-hmr-for-a-react-app-1199564859aa
Separation of concerns: It’s generally better to separate logic from r_____ing.
Separation of concerns: It’s generally better to separate logic from rendering.
useI________H____ hook allows components to provide their functions to other components
useImperativeHandle hook allows components to provide their functions to other components
you might say a component is “c______-ed” when the important information in it is driven by props rather than its own local state.
you might say a component is “controlled” when the important information in it is driven by props rather than its own local state. (This lets the parent component fully specify its behavior.)
It is common to call a component with some local state “un__________-ed”.
It is common to call a component with some local state “uncontrolled”.
For each unique piece of state, you will choose the component that “owns” it. This principle is also known as having a “s_____ s_____ of t_____”.
For each unique piece of state, you will choose the component that “owns” it. This principle is also known as having a “single source of truth”.
JSX elements directly inside a map() call always need k__s!
JSX elements directly inside a map() call always need keys!
A file can only have one d______ export, but it can have numerous named exports!
A file can only have one default export, but it can have numerous named exports!
React components are regular JavaScript f______s
React components are regular JavaScript functions
React assumes that every component you write is a p___ f_______.
React assumes that every component you write is a pure function. (This means that React components you write must always return the same JSX given the same inputs)
React offers a “Strict Mode” in which it calls each component’s function t____ during development.
React offers a “Strict Mode” in which it calls each component’s function twice during development. By calling the component functions twice, Strict Mode helps find components that break these rules.
In React, side effects usually belong inside e____ h______s.
In React, side effects usually belong inside event handlers.
Even though event handlers are defined inside your component, they don’t run during r______-ing! So event handlers don’t need to be pure.
Even though event handlers are defined inside your component, they don’t run during rendering! So event handlers don’t need to be pure.
When possible, try to express your logic with r_____-ing alone.
When possible, try to express your logic with rendering alone.
Hooks—functions starting with use—can only be called at the t__ level of your components or your own Hooks.
Hooks—functions starting with use—can only be called at the top level of your components or your own Hooks.
Unlike props, state is fully p____ to the component declaring it.
Unlike props, state is fully private to the component declaring it.
Unlike props, state is fully private to the c______ declaring it.
Unlike props, state is fully private to the component declaring it.
You can have more than one state variable. Internally, React matches them up by their o____.
You can have more than one state variable. Internally, React matches them up by their order.
S_..-ing state requests a new render.
Setting state requests a new render.
If your state variable is an object, remember that you can’t update only o__ field in it without explicitly copying the other fields.
If your state variable is an object, remember that you can’t update only one field in it without explicitly copying the other fields.
By convention, start the prop name with i_____ or d_____ to clarify that its new values are ignored
By convention, start the prop name with initial or default to clarify that its new values are ignored
Don’t put props into state unless you specifically want to p______ updates.
Don’t put props into state unless you specifically want to prevent updates.
The draft provided by Immer is a special type of object, called a P_____, that “records” what you do with it.
The draft provided by Immer is a special type of object, called a Proxy, that “records” what you do with it.
Run npm install use-i.._. to add Immer as a dependency
Run npm install use-immer to add Immer as a dependency
(Then replace import { useState } from ‘react’ with import { useImmer } from ‘use-immer’)
Treat all s____ in React as immutable.
Treat all state in React as immutable.
you should treat arrays in React state as r.._-only
you should treat arrays in React state as read-only
The array spread syntax also lets you p_____ an item by placing it before the original …artists:
~~~
setArtists([
{ id: nextId++, name: name },
…artists // Put old items at the end
]);
~~~
The array spread syntax also lets you prepend an item by placing it before the original …artists
(In this way, spread can do the job of both push() by adding to the end of an array and unshift() by adding to the beginning of an array.)
In general, you should only mutate objects that you have just c_____-ed.
In general, you should only mutate objects that you have just created.
with Immer, m______ like artwork.seen = nextSeen is now okay because you’re not mutating the original state, but you’re mutating a special d____ object provided by Immer.
with Immer, mutation like artwork.seen = nextSeen is now okay because you’re not mutating the original state, but you’re mutating a special draft object provided by Immer. (Similarly, you can apply mutating methods like push() and pop() to the content of the draft.)
Fragments d_______ from the DOM
Fragments disappear from the DOM
If your data is generated and persisted locally (e.g. notes in a note-taking app), use an incrementing counter, crypto._______() or a package like uuid when creating items.
If your data is generated and persisted locally (e.g. notes in a note-taking app), use an incrementing counter, crypto.randomUUID() or a package like uuid when creating items.
React waits until all code in the e____ h_____s has run before processing your state updates. This behavior, also known as b______, makes your React app run much faster
React waits until all code in the event handlers has run before processing your state updates. This behavior, also known as batching, makes your React app run much faster
React does not b____ across multiple intentional events like clicks—each click is handled separately
React does not batch across multiple intentional events like clicks—each click is handled separately
Updating your component’s state automatically q______s a render
Updating your component’s state automatically queues a render
On initial render, React will call the r.._ component.
On initial render, React will call the root component.
After rendering is done and React updated the DOM, the b_____ will rep____ the screen.
After rendering is done and React updated the DOM, the browser will repaint the screen.
Avoiding direct data m______ lets you keep previous versions of the data intact, and reuse them later.
Avoiding direct data mutation lets you keep previous versions of the data intact, and reuse them later.
It’s strongly recommended that you assign proper keys whenever you build d_____ lists.
It’s strongly recommended that you assign proper keys whenever you build dynamic lists.
useEffect returns _______.
useEffect returns undefined
the hook that runs side-effects independently of rendering
useEffect(callback, [dependencies])
Un______-ing is the process of removing a component from the DOM
Unmounting is the process of removing a component from the DOM
the callback argument of useEffect(callback) cannot be an a____ function.
the callback argument of useEffect(callback) cannot be an async function.
(But you can always define and then invoke an async function inside the callback itself):
function FetchEmployees() {
const [employees, setEmployees] = useState([]);
useEffect(() => { // <--- CANNOT be an async function
async function fetchEmployees() {
// ...
}
fetchEmployees(); // <--- But CAN invoke async functions
}, []);
// ...
}
