React (intermediate)

Question 1

install React Router with the command:

Answer 1

npm install react-router-dom

Question 2

The use_____ hook is a feature of React Router that allows you to access URL parameters in your component. It’s particularly useful when you’re working with d____ routes.

Answer 2

The useParams hook is a feature of React Router that allows you to access URL parameters in your component. It’s particularly useful when you’re working with dynamic routes

Question 3

We define the route rendering a specific note “ex_____ style” by marking the parameter with a colon - :id

Answer 3

We define the route rendering a specific note “express style” by marking the parameter with a colon - :id

Question 4

this hook allows you to pass state to the next route, which can be useful for sharing data between routes without using global state management.

Answer 4

useNavigate

Question 5

the e________ prop is used to specify the React component that should be rendered when the route’s path matches the current URL.

Answer 5

the element prop is used to specify the React component that should be rendered when the route’s path matches the current URL.

Question 6

The element prop takes a ___ expression, not just a component reference.

Answer 6

The element prop takes a JSX expression, not just a component reference.

Question 7

Hooks are like functional m____s that let you create and compose your own abstractions.

Answer 7

Hooks are like functional mixins that let you create and compose your own abstractions.

Question 8

If you only allow one useState() call per component, you lose the ability of custom Hooks to introduce local s___. Which is the point of custom Hooks.

Answer 8

If you only allow one useState() call per component, you lose the ability of custom Hooks to introduce local state. Which is the point of custom Hooks.

Question 9

it’s likely that adopting H___s could reduce your b____ size because code using Hooks tends to m____ better than equivalent code using classes.

Answer 9

it’s likely that adopting Hooks could reduce your bundle size because code using Hooks tends to minify better than equivalent code using classes.

Question 10

Hooks are fully encapsulated — each time you call a Hook, it gets isolated l___ s___ within the currently executing component.

Answer 10

Hooks are fully encapsulated — each time you call a Hook, it gets isolated local state within the currently executing component.
(They’re not a way to share state — but a way to share stateful logic. We don’t want to break the top-down data flow!)

Question 11

___ serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in React classes, but unified into a single API.

Answer 11

useEffect serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in React classes, but unified into a single API.

Question 12

Hooks don’t work inside c____s. But you can use them instead of writing c____s.

Answer 12

Hooks don’t work inside classes. But you can use them instead of writing classes.

Question 13

Hooks offer a powerful and expressive new way to reuse f_____ between c______s

Answer 13

Hooks offer a powerful and expressive new way to reuse functionality between components

Question 14

In React, when you include a prop name without assigning it a value, it’s implicitly set to t___. This is a convenient shorthand for boolean props.

Answer 14

In React, when you include a prop name without assigning it a value, it’s implicitly set to true. This is a convenient shorthand for boolean props.

<Navigate replace to="/login" />

is
~~~
<Navigate replace={true} to=”/login” />
~~~

Question 15

In the context of React and server-side rendering (SSR), “h______” refers to the process of attaching event listeners and state to the static HTML that was rendered on the server, essentially making it interactive on the client side

Answer 15

In the context of React and server-side rendering (SSR), “hydration” refers to the process of attaching event listeners and state to the static HTML that was rendered on the server, essentially making it interactive on the client side

Question 16

If you have cleanup code without corresponding s_____ code, it’s usually a code smell

Answer 16

If you have cleanup code without corresponding setup code, it’s usually a code smell

Question 17

By default, Effects run after ___ render

Answer 17

By default, Effects run after every render

Question 18

Setting state t______s rendering

Answer 18

Setting state triggers rendering

Question 19

Effects only run on the c____. They don’t run during s____ rendering.

Answer 19

Effects only run on the client. They don’t run during server rendering.

Question 20

Avoid relying on o____s and f_____s as dependencies

Answer 20

Avoid relying on objects and functions as dependencies

Question 21

When you want a component to “remember” some information, but you don’t want that information to trigger new renders, you can use a r___

Answer 21

When you want a component to “remember” some information, but you don’t want that information to trigger new renders, you can use a ref

Question 22

A ref is like a secret pocket of your component that React doesn’t track. For example, you can use refs to store t____ IDs, D___ elements, and other objects that don’t impact the component’s rendering output.

Answer 22

A ref is like a secret pocket of your component that React doesn’t track. For example, you can use refs to store timeout IDs, DOM elements, and other objects that don’t impact the component’s rendering output.

Question 23

There are two common cases in which you don’t need Effects:

You don’t need Effects to t_____ data for rendering.
You don’t need Effects to handle user e_____s.

Answer 23

There are two common cases in which you don’t need Effects:

You don’t need Effects to transform data for rendering.
You don’t need Effects to handle user events.

Question 24

useRef returns an object with a single property: c_______

Answer 24

useRef returns an object with a single property: current

Question 25

On the next renders, useRef will return the s____ object.

Answer 25

On the next renders, useRef will return the same object.

Question 26

When you change the r__.current property, React does not re-render your component. React is not aware of when you change it because a ref is a plain JavaScript object.

Answer 26

When you change the ref.current property, React does not re-render your component. React is not aware of when you change it because a ref is a plain JavaScript object.

Question 27

Changing a r__ does not trigger a re-render.

Answer 27

Changing a ref does not trigger a re-render.

Question 28

By using a ref, you ensure that:

1. You can store inf_____ between re-renders
2. Changing it does not trigger a re-r_____
3. The information is l____ to each copy of your component

Answer 28

By using a ref, you ensure that:

1. You can store information between re-renders (unlike regular variables, which reset on every render).
2. Changing it does not trigger a re-render (unlike state variables, which trigger a re-render).
3. The information is local to each copy of your component (unlike the variables outside, which are shared).

Question 29

Do not write or read ref.c____ during rendering.

Answer 29

Do not write or read ref.current during rendering.

Reading or writing a ref during rendering breaks React’s expectations that the body of your component behaves like a pure function:

1. If the inputs (props, state, and context) are the same, it should return exactly the same JSX.
2. Calling it in a different order or with different arguments should not affect the results of other calls.

Question 30

You can read or write refs from event h____s or effects instead.

Answer 30

You can read or write refs from event handlers or effects instead.

Question 31

It’s particularly common to use a ref to manipulate the D___.

Answer 31

It’s particularly common to use a ref to manipulate the DOM.

Question 32

useReducer is very similar to useState, but it lets you move the state update logic from event handlers into a single function outside of your c_____.

Answer 32

useReducer is very similar to useState, but it lets you move the state update logic from event handlers into a single function outside of your component.

Question 33

Reducers must be p___. Similar to state updater functions, reducers run during rendering!

Answer 33

Reducers must be pure. Similar to state updater functions, reducers run during rendering!
(same inputs always result in the same output)

Question 34

Initially, myRef.current will be n___

Answer 34

Initially, myRef.current will be null

Question 35

If you pass a function to useState, React will only call it during in______.

Answer 35

If you pass a function to useState, React will only call it during initialization.

Question 36

If you’re worried about recomputing too often, the useM___ Hook can help.

Answer 36

If you’re worried about recomputing too often, the useMemo Hook can help.

Question 37

It is not possible to use the useMatch hook in the component which defines the r___ed part of the application

Answer 37

It is not possible to use the useMatch hook in the component which defines the routed part of the application

Question 38

BrowserRouter is a Router that uses the HTML5 h_____ API (pushState, replaceState and the popState event) to keep your UI in sync with the URL.

Answer 38

BrowserRouter is a Router that uses the HTML5 history API (pushState, replaceState and the popState event) to keep your UI in sync with the URL.

Question 39

BrowserRouter is a Router that uses the HTML5 history API (pushState, replaceState and the popState event) to keep your U_ in sync with the U__.

Answer 39

BrowserRouter is a Router that uses the HTML5 history API (pushState, replaceState and the popState event) to keep your UI in sync with the URL.

Question 40

useMemo won’t make the f___ render faster. It only helps you skip unnecessary work on updates.

Answer 40

useMemo won’t make the first render faster. It only helps you skip unnecessary work on updates.

Question 41

JSX elements must have one p____ element

Answer 41

JSX elements must have one parent element

Question 42

function HomeButton() {
  const navigate = useNavigate();

  return (
    <button onClick={() => n\_\_\_\_('/')}>Go to Table of Contents</button>
  );
}

Answer 42

function HomeButton() {
  const navigate = useNavigate();

  return (
    <button onClick={() => navigate('/')}>Go to Table of Contents</button>
  );
}

Question 43

The _____ hook returns a location object containing information about the current URL.

Answer 43

The useLocation() hook returns a location object containing information about the current URL.