Brainscape's Knowledge GenomeTM


Top Flashcards (Certified)
All Flashcards

New Yorkshire > React (Basic) > Flashcards

React (Basic) Flashcards

(106 cards)

Start Studying
1
Q

To add a state variable, import useS_._. from React at the top of the file

A

To add a state variable, import useState from React at the top of the file

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

The idea of JSX is quite similar to many t____ing languages

A

The idea of JSX is quite similar to many templating languages

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

effect hooks are precisely the right tool to use when f____ing data from a server.

A

effect hooks are precisely the right tool to use when fetching data from a server.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

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______

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

The axios ‘get’ method returns a p_____

A

The axios get method returns a promise

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

a call to a state-updating function triggers the re-r________-ing of the component

A

a call to a state-updating function triggers the re-rendering of the component

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

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.

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

All events propagate in React except onS_._.., which only works on the JSX tag you attach it to.

A

All events propagate in React except onScroll, which only works on the JSX tag you attach it to.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

The browser gets the JavaScript from the React d__ s______, which is the application that runs after running the command npm run dev

A

The browser gets the JavaScript from the React dev server, which is the application that runs after running the command npm run dev

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Functions that create actions are called a____ c_____s.

A

Functions that create actions are called action creators.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

axios is installed as a runtime dependency of the application because the execution of the program requires the existence of the l_____

A

axios is installed as a runtime dependency of the application because the execution of the program requires the existence of the library

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

React treats a component defined inside of another component as a n____ component in every render

A

React treats a component defined inside of another component as a new component in every render

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

the content of a React component (usually) needs to contain one r.._ element.

A

the content of a React component (usually) needs to contain one root element.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Effects let a component connect to and synchronize with ex____ systems

A

Effects let a component connect to and synchronize with external systems

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

_ _ _ is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file.

A

JSX is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

One best practice in React is to L____ the s____ up in the component hierarchy.

A

One best practice in React is to lift the state up in the component hierarchy.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

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

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

rendering completely different React elements depending on the state of the application is called c________ rendering

A

rendering completely different React elements depending on the state of the application is called conditional rendering

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

Under the hood, JSX returned by React components is c________ed into JavaScript.

A

Under the hood, JSX returned by React components is compiled into JavaScript.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

Local variables don’t persist between r________s.

A

Local variables don’t persist between renders

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

An event handler is supposed to be either a f________ or a f________ reference

A

An event handler is supposed to be either a function or a function reference

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

useEffect takes _ parameters

A

useEffect takes 2 parameters

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

When a software developer uses React, they rarely or never directly manipulate the D._

A

When a software developer uses React, they rarely or never directly manipulate the DOM

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

I_._x as a key is an anti-pattern

A

Index as a key is an anti-pattern

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Effects are an “es____ h____” from the React paradigm.
Effects are an ***“escape hatch”*** from the React paradigm.
26
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***
27
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.
28
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.
29
Local variables don’t p____ between renders.
Local variables don’t ***persist*** between renders.
30
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***
31
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***
32
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.
33
E.._._s are an “escape hatch” from the React paradigm.
***Effects*** are an “escape hatch” from the React paradigm.
34
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
35
Never d____ components inside of other components
Never ***define*** components inside of other components
36
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
37
The optimization process for JavaScript files is called m_______.
The optimization process for JavaScript files is called ***minification***.
38
a k._ is the only thing React uses to identify DOM elements
a ***key*** is the only thing React uses to identify DOM elements
39
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***
40
"Objects are not valid as a React c____"
Objects are not valid as a React ***child***
41
state update in React happens a____________ly
state update in React happens ***asynchronously***
42
Don’t use Effects to orchestrate the d____ f____ of your application
Don’t use Effects to orchestrate the ***data flow*** of your application
43
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
44
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.
45
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***
46
Avoid deeply n._.ed state
Avoid deeply ***nested*** state
47
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.
48
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.
49
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.
50
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!
51
`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`.
52
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.
53
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
54
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.
55
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***.
56
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.
57
The dependencies of `useEffect` trigger its execution only when their values c______
The dependencies of `useEffect` trigger its execution only when their values ***change***
58
`useEffect` dependencies are typically s____ variables (variables created by useState)
`useEffect` dependencies are typically ***state variables*** (variables created by useState)
59
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.
60
"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."
61
"Dis________-ing" basically means ‘a request to update the state’
***Dispatching*** basically means ‘a request to update the state’
62
- 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
63
Sometimes you need to maintain a single function inst_________ between renderings
Sometimes you need to maintain a single function ***instance*** between renderings
64
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.
65
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
66
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**.
67
useI________H____ hook allows components to provide their functions to other components
**useImperativeHandle** hook allows components to provide their functions to other components
68
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.)
69
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”.**
70
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”.**
71
JSX elements directly inside a map() call always need k__s!
JSX elements directly inside a map() call always need **keys!**
72
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!
73
React components are regular JavaScript f______s
React components are regular JavaScript **functions**
74
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)
75
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.
76
In React, side effects usually belong inside e____ h______s.
In React, side effects usually belong inside **event handlers.**
77
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.
78
When possible, try to express your logic with r_____-ing alone.
When possible, try to express your logic with **rendering** alone.
79
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.
80
Unlike props, state is fully p____ to the component declaring it.
Unlike props, state is fully **private** to the component declaring it.
81
Unlike props, state is fully private to the c______ declaring it.
Unlike props, state is fully private to the **component** declaring it.
82
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**.
83
S_..-ing state requests a new render.
**Setting** state requests a new render.
84
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.
85
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
86
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.
87
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.
88
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')
89
Treat all s____ in React as immutable.
Treat all **state** in React as immutable.
90
you should treat arrays in React state as r.._-only
you should treat arrays in React state as **read-only**
91
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.)
92
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**.
93
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.)
94
Fragments d_______ from the DOM
Fragments **disappear** from the DOM
95
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.
96
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
97
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
98
Updating your component’s state automatically q______s a render
Updating your component’s state automatically **queues** a render
99
On initial render, React will call the r.._ component.
On initial render, React will call the **root** component.
100
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**.
101
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.
102
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.
103
useEffect returns _______.
useEffect returns **undefined**
104
the hook that runs side-effects independently of rendering
useEffect(callback, [dependencies])
105
Un______-ing is the process of removing a component from the DOM
**Unmounting** is the process of removing a component from the DOM
106
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 }, []); // ... } ```

New Yorkshire (35 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2025 Bold Learning Solutions. Terms and Conditions