useEffect( ) / Callback() / Reducer() / Context()

Question 1

The dependencies argument of useEffect(callback, dependencies) lets you control when the s____-e_____ runs.

Answer 1

The dependencies argument of useEffect(callback, dependencies) lets you control when the side-effect runs.

Question 2

If the dependencies are not provided, the side-effect runs after _____ rendering.

Answer 2

If the dependencies are not provided, the side-effect runs after every rendering.

Question 3

If the dependencies are an empty array [] the side-effect runs _____ after the ______ rendering.

Answer 3

If the dependencies are an empty array []: the side-effect runs once after the initial rendering.

Question 4

If the dependencies has props or state values [prop1, prop2, …, state1, state2]: the side-effect runs ____ after____ rendering and then only when any d______ value changes.

Answer 4

If the dependencies has props or state values [prop1, prop2, …, state1, state2]: the side-effect runs once after initial rendering and then only when any dependency value changes.

Question 5

The dependencies argument of the useEffect() lets you catch certain component lifecycle events: when the component has been m______-ed or a specific prop or state value has changed.

Answer 5

The dependencies argument of the useEffect() lets you catch certain component lifecycle events: when the component has been mounted or a specific prop or state value has changed.

Question 6

M_____ing specifically refers to the process of inserting a component into the DOM for the first time.

Answer 6

Mounting specifically refers to the process of inserting a component into the DOM for the first time.

Question 7

useEffect(callback, [prop, state]) invokes the callback once after mounting, and again after committing the changes to the ___, if and only if any value in the dependencies array [prop, state] has changed.

Answer 7

useEffect(callback, [prop, state]) invokes the callback once after mounting, and again after committing the changes to the DOM, if and only if any value in the dependencies array [prop, state] has changed.

Question 8

By using the d________s argument of useEffect(), you control when the side-effect is called, independently from the rendering cycles of the component. Again, that’s the essence of useEffect() hook.

Answer 8

By using the dependencies argument of useEffect(), you control when the side-effect is called, independently from the rendering cycles of the component. Again, that’s the essence of useEffect() hook.

Question 9

By using the dependencies argument of useEffect(), you control _____ the side-effect is called, independently from the rendering cycles of the component. Again, that’s the essence of useEffect() hook.

Answer 9

By using the dependencies argument of useEffect(), you control when the side-effect is called, independently from the rendering cycles of the component. Again, that’s the essence of useEffect() hook.

Question 10

If the callback of useEffect(callback, deps) returns a f______, then useEffect() considers that function as an effect cleanup

Answer 10

If the callback of useEffect(callback, deps) returns a function, then useEffect() considers that function as an effect cleanup

Question 11

If the callback of useEffect(callback, deps) returns a function, then useEffect() considers that function as an effect c_____

useEffect(function callback() => {
  // Side-effect...

  return function cleanup() { <<<<<<<<
    // Side-effect cleanup...  <<<<<<<<
  };
}, dependencies);

Answer 11

If the callback of useEffect(callback, deps) returns a function, then useEffect() considers that function as an effect cleanup

Question 12

Cleanup works the following way:

A) After i_____ rendering, useEffect() invokes the callback with the side-effect. cleanup function is ___ invoked.

B) On later renderings, before invoking the next side-effect callback, useEffect() i_____s the cleanup function from the previous side-effect execution (to clean up everything after the previous side-effect), then i______s the current side-effect.

C) Finally, after unm_____ing the component, useEffect() invokes the cleanup function from the latest side-effect.

Answer 12

Cleanup works the following way:

A) After initial rendering, useEffect() invokes the callback with the side-effect. cleanup function is not invoked.

B) On later renderings, before invoking the next side-effect callback, useEffect() invokes the cleanup function from the previous side-effect execution (to clean up everything after the previous side-effect), then invokes the current side-effect.

C) Finally, after unmounting the component, useEffect() invokes the cleanup function from the latest side-effect.

Question 13

useCallback(callbackFun, deps) is helpful when given the same dependency values as deps, the hook returns the same function instance between renderings (aka m______tion):

Answer 13

useCallback(callbackFun, deps) is helpful when given the same dependency values as deps, the hook returns the same function instance between renderings (aka memoization)

Question 14

Context.Provider component available on the context instance is used to provide the context to its ____ components, no matter how deep they are.

Answer 14

Context.Provider component available on the context instance is used to provide the context to its child components, no matter how deep they are.

Question 15

Context.P____ component available on the context instance is used to provide the context to its child components, no matter how deep they are.

Answer 15

Context.Provider component available on the context instance is used to provide the context to its child components, no matter how deep they are.

Question 16

a way to use useContext() is with a render f____ supplied as a c____ to Context.Consumer special component available on the context instance

Answer 16

a way use useContext() is with a render function supplied as a child to Context.Consumer special component available on the context instance

import { Context } from './context';

function MyComponent() {
  return (
    <Context.Consumer>
      {value => <span>{value}</span>}
    </Context.Consumer>
  );
}

Question 17

a way to use useContext() is with a render function supplied as a child to Context.C____ special component available on the context instance

Answer 17

a way use useContext() is with a render function supplied as a child to Context.Consumer special component available on the context instance

import { Context } from './context';

function MyComponent() {
  return (
    <Context.Consumer>
      {value => <span>{value}</span>}
    </Context.Consumer>
  );
}

Question 18

You can have how many consumers for a single context?

Answer 18

You can have as many consumers as you want for a single context.

Question 19

If the context value changes (by changing the value prop of the provider <Context.P____ value={value} />), then all consumers are immediately notified and re-rendered.

Answer 19

If the context value changes (by changing the value prop of the provider <Context.Provider value={value} />), then all consumers are immediately notified and re-rendered.

Question 20

If the context value changes (by changing the value prop of the provider <Context.Provider value={value} />), then all consumers are immediately notified and re-r_____-ed.

Answer 20

If the context value changes (by changing the value prop of the provider <Context.Provider value={value} />), then all consumers are immediately notified and re-rendered

Question 21

If the consumer isn’t wrapped inside the provider, but still tries to access the context value (using useContext(Context) or <Context.Consumer>), then the value of the context would be the d_ v_ argument supplied to createContext(d_) factory function that had created the context.</Context.Consumer>

Answer 21

If the consumer isn’t wrapped inside the provider, but still tries to access the context value (using useContext(Context) or <Context.Consumer>), then the value of the context would be the **default value** argument supplied to createContext(**defaultValue**) factory function that had created the context.</Context.Consumer>

Question 22

context can hold:
g___ state
theme
application c______
a______-d user name
user s_____
preferred language
a collection of s_____s

Answer 22

context can hold:
global state
theme
application configuration
authenticated user name
user settings
preferred language
a collection of services

Question 23

The simplest way to pass data from a parent to a child component is when the parent assigns p____s to its child component

Answer 23

The simplest way to pass data from a parent to a child component is when the parent assigns props to its child component

function Application() {
  const userName = "John Smith";
  return <UserInfo userName={userName} />;
}

function UserInfo({ userName }) {
  return <span>{userName}</span>;
}

Question 24

The React Context API is s______less by default and doesn’t provide a dedicated method to update the context value from consumer components.

Answer 24

The React Context API is stateless by default and doesn’t provide a dedicated method to update the context value from consumer components.

Question 25

The useReducer(reducer, _____) hook accepts 2 arguments: the reducer f____ and the initial s_____.

Answer 25

The useReducer(reducer, **initialState**) hook accepts 2 arguments: the **reducer function** and the **initial state**

Question 26

The useReducer hook returns an array of 2 items: the c_____ state and the d_____ function.

Answer 26

The useReducer hook returns an array of 2 items: the **current state** and the **dispatch function**

Question 27

An action object is an object that describes how to u_____ the state.

Answer 27

An action object is an object that describes how to **update** the state.

Question 28

The d______ is a special function that dispatches an action object.

Answer 28

The **dispatch** is a special function that dispatches an action object. (Dispatching means a request to update the state.)

Question 29

The dispatch is a special function that dispatches an a____ o_____.

Answer 29

The dispatch is a special function that dispatches an **action object**. (Dispatching means a request to update the state.)

Question 30

The d_____ is a special function that dispatches an action object.

Answer 30

The **dispatch** is a special function that dispatches an action object. (Dispatching means a request to update the state.)

Question 31

If you’re familiar with object-oriented programming, refs might remind you of instance fields—but instead of t___.something you write somethingRef.current.

Answer 31

If you’re familiar with object-oriented programming, refs might remind you of instance fields—but instead of **this.something** you write somethingRef.current.

Question 32

The engine order telegraph is the d____ function, the commands are the a____ o____s, the engineers in the engine room are the r______ function, and the engine regime is the s____.

Answer 32

The engine order telegraph is the **dispatch** function, the commands are the **action objects**, the engineers in the engine room are the **reducer function**, and the engine regime is the **state**. https://dmitripavlutin.com/react-usereducer/#:~:text=The%20engine%20order%20telegraph%20is%20the%20dispatch%20function%2C%20the%20commands%20are%20the%20action%20objects%2C%20the%20engineers%20in%20the%20engine%20room%20are%20the%20reducer%20function%2C%20and%20the%20engine%20regime%20is%20the%20state.

Question 33

> metaphor < The engine order telegraph helps separate the bridge from the engine room. In the same way the useReducer() hook helps separate the r_____ing from the s____ management logic.

Answer 33

The engine order telegraph helps separate the bridge from the engine room. In the same way the useReducer() hook helps separate the **rendering** from the **state** management logic.