Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

New Yorkshire > React (Basic) > Flashcards

React (Basic) Flashcards

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
Q

Effects are an “es____ h____” from the React paradigm.

A

Effects are an “escape hatch” from the React paradigm.

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

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

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

JSX is a s_____ 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
28
Q

Unlike the “normal” props we’ve seen before, c________ is automatically added by React and always exists.

A

Unlike the “normal” props we’ve seen before, children is automatically added by React and always exists.

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

Local variables don’t p____ between renders.

A

Local variables don’t persist between renders.

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

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____

A

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

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

middleware functions are called in the order that they’re encountered by the JavaScript e______

A

middleware functions are called in the order that they’re encountered by the JavaScript engine

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

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.

A

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.

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

E.._._s are an “escape hatch” from the React paradigm.

A

Effects are an “escape hatch” from the React paradigm.

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

Actions are o_._._s, which have at least a field determining the type of the action

A

Actions are objects, which have at least a field determining the type of the action

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

Never d____ components inside of other components

A

Never define components inside of other components

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

Event handlers will also catch events from any c_____ your component might have

A

Event handlers will also catch events from any children your component might have

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

The optimization process for JavaScript files is called m_______.

A

The optimization process for JavaScript files is called minification.

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

a k._ is the only thing React uses to identify DOM elements

A

a key is the only thing React uses to identify DOM elements

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

Changing state has to always be done by setting the state to a new o______

A

Changing state has to always be done by setting the state to a new object

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

“Objects are not valid as a React c____”

A

Objects are not valid as a React child

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

state update in React happens a____________ly

A

state update in React happens asynchronously

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

Don’t use Effects to orchestrate the d____ f____ of your application

A

Don’t use Effects to orchestrate the data flow of your application

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

Don’t use E.._._s to orchestrate the data flow of your application

A

Don’t use Effects to orchestrate the data flow of your application

44
Q

Projects created with create-react-app or vite are configured to c____ automatically.

A

Projects created with create-react-app or vite are configured to compile automatically.

45
Q

If you always update two or more state variables at the same time, consider m____-ing them into a single s____ v_____

A

If you always update two or more state variables at the same time, consider merging them into a single state variable

46
Q

Avoid deeply n._.ed state

A

Avoid deeply nested state

47
Q

A deeply h_____al state is inconvenient to update. Whenever possible, structure the state in a f____ manner.

A

A deeply hierarchical state is inconvenient to update. Whenever possible, structure the state in a flat manner.

48
Q

Avoid r_____ state

A

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
Q

Avoid c_____s in state

A

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
Q

Avoid d______ in state

A

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
Q

useCallback m________s a function and returns the same instance of the function unless its dependencies change.

A

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
Q

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.

A

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
Q

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.

A

useContext

54
Q

The useE____ hook is a way that we can register a callback function to be invoked when a state variable changes.

A

The useEffect hook is a way that we can register a callback function to be invoked when a state variable changes.

55
Q

useE____ is a type of react hook that accepts two arguments, a callback function and an optional argument, an array of d____________s.

A

useEffect is a type of react hook that accepts two arguments, a callback function and an optional argument, an array of dependencies.

56
Q

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.

A

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
Q

The dependencies of useEffect trigger its execution only when their values c______

A

The dependencies of useEffect trigger its execution only when their values change

58
Q

useEffect dependencies are typically s____ variables (variables created by useState)

A

useEffect dependencies are typically state variables (variables created by useState)

59
Q

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.

A

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
Q

“Context in React lets you supply child components with g_____ data, no matter how deep they are in the components tree.”

A

“Context in React lets you supply child components with global data, no matter how deep they are in the components tree.”

61
Q

“Dis________-ing” basically means ‘a request to update the state’

A

Dispatching basically means ‘a request to update the state’

62
Q
  • 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
A

Reducer function

63
Q

Sometimes you need to maintain a single function inst_________ between renderings

A

Sometimes you need to maintain a single function instance between renderings

64
Q

In React we have to use the classN___ attribute instead of the class attribute.

A

In React we have to use the className attribute instead of the class attribute.

65
Q

Edit src/App.jsx and save to test HMR.
HMR stands for what?

A

Hot Module Replacement
https://medium.com/@oresoftware/hot-module-replacement-hmr-for-a-react-app-1199564859aa

66
Q

Separation of concerns: It’s generally better to separate logic from r_____ing.

A

Separation of concerns: It’s generally better to separate logic from rendering.

67
Q

useI________H____ hook allows components to provide their functions to other components

A

useImperativeHandle hook allows components to provide their functions to other components

68
Q

you might say a component is “c______-ed” when the important information in it is driven by props rather than its own local state.

A

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
Q

It is common to call a component with some local state “un__________-ed”.

A

It is common to call a component with some local state “uncontrolled”.

70
Q

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

A

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
Q

JSX elements directly inside a map() call always need k__s!

A

JSX elements directly inside a map() call always need keys!

72
Q

A file can only have one d______ export, but it can have numerous named exports!

A

A file can only have one default export, but it can have numerous named exports!

73
Q

React components are regular JavaScript f______s

A

React components are regular JavaScript functions

74
Q

React assumes that every component you write is a p___ f_______.

A

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
Q

React offers a “Strict Mode” in which it calls each component’s function t____ during development.

A

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
Q

In React, side effects usually belong inside e____ h______s.

A

In React, side effects usually belong inside event handlers.

77
Q

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.

A

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
Q

When possible, try to express your logic with r_____-ing alone.

A

When possible, try to express your logic with rendering alone.

79
Q

Hooks—functions starting with use—can only be called at the t__ level of your components or your own Hooks.

A

Hooks—functions starting with use—can only be called at the top level of your components or your own Hooks.

80
Q

Unlike props, state is fully p____ to the component declaring it.

A

Unlike props, state is fully private to the component declaring it.

81
Q

Unlike props, state is fully private to the c______ declaring it.

A

Unlike props, state is fully private to the component declaring it.

82
Q

You can have more than one state variable. Internally, React matches them up by their o____.

A

You can have more than one state variable. Internally, React matches them up by their order.

83
Q

S_..-ing state requests a new render.

A

Setting state requests a new render.

84
Q

If your state variable is an object, remember that you can’t update only o__ field in it without explicitly copying the other fields.

A

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
Q

By convention, start the prop name with i_____ or d_____ to clarify that its new values are ignored

A

By convention, start the prop name with initial or default to clarify that its new values are ignored

86
Q

Don’t put props into state unless you specifically want to p______ updates.

A

Don’t put props into state unless you specifically want to prevent updates.

87
Q

The draft provided by Immer is a special type of object, called a P_____, that “records” what you do with it.

A

The draft provided by Immer is a special type of object, called a Proxy, that “records” what you do with it.

88
Q

Run npm install use-i.._. to add Immer as a dependency

A

Run npm install use-immer to add Immer as a dependency

(Then replace import { useState } from ‘react’ with import { useImmer } from ‘use-immer’)

89
Q

Treat all s____ in React as immutable.

A

Treat all state in React as immutable.

90
Q

you should treat arrays in React state as r.._-only

A

you should treat arrays in React state as read-only

91
Q

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
]);
~~~

A

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
Q

In general, you should only mutate objects that you have just c_____-ed.

A

In general, you should only mutate objects that you have just created.

93
Q

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.

A

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
Q

Fragments d_______ from the DOM

A

Fragments disappear from the DOM

95
Q

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.

A

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
Q

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

A

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
Q

React does not b____ across multiple intentional events like clicks—each click is handled separately

A

React does not batch across multiple intentional events like clicks—each click is handled separately

98
Q

Updating your component’s state automatically q______s a render

A

Updating your component’s state automatically queues a render

99
Q

On initial render, React will call the r.._ component.

A

On initial render, React will call the root component.

100
Q

After rendering is done and React updated the DOM, the b_____ will rep____ the screen.

A

After rendering is done and React updated the DOM, the browser will repaint the screen.

101
Q

Avoiding direct data m______ lets you keep previous versions of the data intact, and reuse them later.

A

Avoiding direct data mutation lets you keep previous versions of the data intact, and reuse them later.

102
Q

It’s strongly recommended that you assign proper keys whenever you build d_____ lists.

A

It’s strongly recommended that you assign proper keys whenever you build dynamic lists.

103
Q

useEffect returns _______.

A

useEffect returns undefined

104
Q

the hook that runs side-effects independently of rendering

A

useEffect(callback, [dependencies])

105
Q

Un______-ing is the process of removing a component from the DOM

A

Unmounting is the process of removing a component from the DOM

106
Q

the callback argument of useEffect(callback) cannot be an a____ function.

A

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

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