React

Question 1

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

Answer 1

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

Question 2

The idea of JSX is quite similar to many t____ing languages

Answer 2

The idea of JSX is quite similar to many templating languages

Question 3

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

Answer 3

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

Question 4

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______

Answer 4

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

Question 5

The axios ‘get’ method returns a p_____

Answer 5

The axios get method returns a promise

Question 6

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

Answer 6

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

Question 7

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.

Answer 7

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.

Question 8

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

Answer 8

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

Question 9

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

Answer 9

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

Question 10

Functions that create actions are called a____ c_____s.

Answer 10

Functions that create actions are called action creators.

Question 11

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

Answer 11

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

Question 12

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

Answer 12

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

Question 13

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

Answer 13

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

Question 14

Effects let a component connect to and synchronize with ex____ systems

Answer 14

Effects let a component connect to and synchronize with external systems

Question 15

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

Answer 15

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

Question 16

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

Answer 16

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

Question 17

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

Answer 17

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

Question 18

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

Answer 18

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

Question 19

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

Answer 19

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

Question 20

Local variables don’t persist between r________s.

Answer 20

Local variables don’t persist between renders

Question 21

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

Answer 21

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

Question 22

useEffect takes _ parameters

Answer 22

useEffect takes 2 parameters

Question 23

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

Answer 23

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

Question 24

I_._x as a key is an anti-pattern

Answer 24

Index as a key is an anti-pattern

Question 25

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

Answer 25

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

Question 26

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

Answer 26

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

Question 27

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

Answer 27

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

Question 28

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

Answer 28

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

Question 29

Local variables don’t p____ between renders.

Answer 29

Local variables don’t persist between renders.

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

Answer 30

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

Question 31

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

Answer 31

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

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

Answer 32

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.

Question 33

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

Answer 33

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

Question 34

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

Answer 34

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

Question 35

Never d____ components inside of other components

Answer 35

Never define components inside of other components

Question 36

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

Answer 36

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

Question 37

The optimization process for JavaScript files is called m_______.

Answer 37

The optimization process for JavaScript files is called minification.

Question 38

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

Answer 38

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

Question 39

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

Answer 39

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

Question 40

“Objects are not valid as a React c____”

Answer 40

Objects are not valid as a React child

Question 41

state update in React happens a____________ly

Answer 41

state update in React happens asynchronously

Question 42

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

Answer 42

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

Question 43

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

Answer 43

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

Question 44

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

Answer 44

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

Question 45

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

Answer 45

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

Question 46

Avoid deeply n._.ed state

Answer 46

Avoid deeply nested state

Question 47

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

Answer 47

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

Question 48

Avoid r_____ state

Answer 48

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.

Question 49

Avoid c_____s in state

Answer 49

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.

Question 50

Avoid d______ in state

Answer 50

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!

Question 51

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

Answer 51

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.

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

Answer 52

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.

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

Answer 53

useContext

Question 54

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

Answer 54

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

Question 55

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

Answer 55

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

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

Answer 56

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.

Question 57

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

Answer 57

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

Question 58

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

Answer 58

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

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

Answer 59

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.

Question 60

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

Answer 60

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

Question 61

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

Answer 61

Dispatching basically means ‘a request to update the state’

Question 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

Answer 62

Reducer function

Question 63

Sometimes you need to maintain a single function inst_________ between renderings

Answer 63

Sometimes you need to maintain a single function instance between renderings

Question 64

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

Answer 64

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

Question 65

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

Answer 65

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

Question 66

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

Answer 66

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

Question 67

useI________H____ hook which allows components to provide their functions to other components

Answer 67

useImperativeHandle hook which allows components to provide their functions to other components

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

Answer 68

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

Question 69

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

Answer 69

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

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

Answer 70

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

Question 71

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

Answer 71

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

Question 72

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

Answer 72

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

Question 73

React components are regular JavaScript f______s

Answer 73

React components are regular JavaScript functions

Question 74

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

Answer 74

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)

Question 75

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

Answer 75

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.

Question 76

In React, side effects usually belong inside e____ h______s.

Answer 76

In React, side effects usually belong inside event handlers.

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

Answer 77

Even though event handlers are defined inside your component, they don’t run during rendering! So event handlers don’t need to be pure.

Question 78

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

Answer 78

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

Question 79

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

Answer 79

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

Question 80

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

Answer 80

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

Question 81

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

Answer 81

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

Question 82

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

Answer 82

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

Question 83

S_..-ing state requests a new render.

Answer 83

Setting state requests a new render.

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

Answer 84

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

Question 85

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

Answer 85

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

Question 86

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

Answer 86

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

Question 87

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

Answer 87

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

Question 88

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

Answer 88

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

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

Question 89

Treat all s____ in React as immutable.

Answer 89

Treat all state in React as immutable.

Question 90

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

Answer 90

you should treat arrays in React state as read-only

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

Answer 91

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

Question 92

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

Answer 92

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

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

Answer 93

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

Question 94

Fragments d_______ from the DOM

Answer 94

Fragments disappear from the DOM

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

Answer 95

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.

Question 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

Answer 96

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

Question 97

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

Answer 97

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

Question 98

Updating your component’s state automatically q______s a render

Answer 98

Updating your component’s state automatically queues a render

Question 99

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

Answer 99

On initial render, React will call the root component.