REACT

Question 1

What is Webpack?

Answer 1

Webpack, grabs only the files the web browser needs and bundles them for quick easy use for the browser.

Question 2

What is the advantage of using Webpack (or a similar bundler)?

Answer 2

Make things quicker and less downloading.

Question 3

What is Babel?

Answer 3

Converts modern javascript into older javascvript.

Question 4

What is the advantage of using Babel (or a similar transpiler)?

Answer 4

Allows us to develop javascript with modern rules but still allow older browsers to run.

Question 5

What is React?

Answer 5

A framework to create reusable and interactive components.

Question 6

What is a React element?

Answer 6

Custom written DOM element or group of.

Question 7

How do you mount a React element to the DOM?

Answer 7

ReactDom

Question 8

What is JSX?

Answer 8

JSX allows you to write, html in your javascript.

Question 9

How does React use JSX to render components?

Answer 9

React runs all the fance DoM javascript methods.

Question 10

What is a React component?

Answer 10

A html element or group of elements.

Question 11

How do you define a component in React?

Answer 11

In a function with uppercase name that returns JSX.

Question 12

How do you mount a component to the DOM (or “render” a component)?

Answer 12

By calling a function that returns JSX and is capital letters.

Question 13

How to you pass an event handler to a React component?

Answer 13

Through it’s props

Question 14

What is the naming convention for event handlers?

Answer 14

handleWhatever

Question 15

What are some custom event handler props a component may wish to define?

Answer 15

Whatever they need?

Question 16

What is the naming convention for custom event handler props?

Answer 16

onClick

Question 17

What are hooks in React?

Answer 17

Any function starting with use that run while React is rendering.

Question 18

What are the “Rules of Hooks”?

Answer 18

They must be called at the top level of a components or inside other hooks.

Question 19

What is the purpose of state in React?

Answer 19

Maintain a variable as a state variable through renders.

Question 20

Why can’t we just maintain state in a local variable?

Answer 20

Local variable do not persist through a render and changes to a variable don’t trigger a render. Also to make a component reusable you need a variable for each one.

Question 21

What two actions happen when you call a state setter function?

Answer 21

Triggers a render, and updates a ‘cache’ or future value of the variable for after the render.

Question 22

When does the local state variable get updated with the new value?

Answer 22

After the render is done.

Question 23

How do controlled components differ from uncontrolled components?

Answer 23

The parent controls the child, or uncontrolled does it itselfs.

Question 24

What are some advantages of using uncontrolled components?

Answer 24

Don’t have to maintain states, can be a lot of work with a lot of fields.

Question 25

What are some advantages of using controlled components?

Answer 25

Allows interactivity with other components.

Question 26

Which style do you prefer?

Answer 26

Controlled.

Question 27

What two props must you pass to an input for it to be “controlled”?

Answer 27

A value and a onChange prop.

Question 28

What are some popular npm packages for creating forms in React?

Answer 28

React Hook Form, Formik, and React Final Form.

Question 29

When would we want to create a list of React components?

Answer 29

When you need dynamic lists. You want to organize your lists or filter data.

Question 30

Why is it important for React components to be data-driven?

Answer 30

Make reusable components.

Question 31

Where in the component code would a list of React components typically be built?

Question 32

What Array method is commonly used to create a list of React components?

Answer 32

array.map

Question 33

Why do components in a list need to have unique keys?

Answer 33

So that we can make the list dynamic to remove and change and reorder the list and let react track them.

Question 34

What is the best value to use as a “key” prop when rendering lists?

Answer 34

An ID attached to the data.

Question 35

When is a component “mounted” to the DOM?

Answer 35

When a component appears on the page the first time.

Question 36

What is a React Effect?

Answer 36

A block of code that runs after the page renders.

Question 37

When should you use an Effect and when should you not use an Effect?

Answer 37

When your running code outside of React.

Question 38

When do Effects run?

Answer 38

After the page renders. or if its dependencies change.

Question 39

What function is used to declare an Effect?

Answer 39

useEffect

Question 40

What are Effect dependencies and how do you declare them?

Answer 40

To help tell an effect to run. pass them as a second argument as an array.

Question 41

Why would you want to clean up from an Effect?

Answer 41

Release resources from the effect.

Question 42

How do you clean up from an Effect?

Answer 42

Resetting variable, closing timers.

Question 43

When does the cleanup function run?

Answer 43

After the effect runs.

Question 44

How can useEffect be used to load data for a component?

Answer 44

Loading data after everything else has been render.

Question 45

What browser function can be used to make HTTP requests to a server in React?

Answer 45

fetch.

Question 46

How do you use useEffect to load component data just once when the component mounts?

Answer 46

Set the the dependencies to []. An empty array.

Question 47

How do you use useEffect to load component data every time the data key changes?

Answer 47

Set the data key as a dependency.

Question 48

In a large-scale production app, what are some better alternatives for loading and managing backend data?

Answer 48

Packages that manage it for you.

Question 49

What is the purpose of React “context”?

Answer 49

To share data with different components from a common ancestor without having to pass props at each level

Question 50

What values can be stored in context?

Answer 50

Objects? Any data.

Question 51

How do you create context and make it available to the components?

Answer 51

create a context and wrap <AppContext.Provider> around the parent component you want to hold the context.</AppContext.Provider>

Question 52

How do you access the context values?

Answer 52

assign the values from useContext to a variable in the component after passing the context to the <AppContext.Provider></AppContext.Provider>

Question 53

When would you use context? (in addition to the best answer: “rarely”)

Answer 53

Managing user login data/permissions, or a common color theme i.e. user switched to dark mode.

Question 54

What is a React custom hook?

Answer 54

A hook that you write, that starts with use and should probably call other hooks.

Question 55

When are custom hooks useful? When are they not required?

Answer 55

To reduce code duplication. If it doesn’t call another hook it doesn’t need to be another hook.

Question 56

What is the syntax (or naming convention) for writing a custom hook?

Answer 56

Write a function that starts with use*****

Question 57

How do you call a custom hook?

Question 58

When do custom hooks execute?