Week 10 Quiz Questions

Question 1

How do controlled components differ from uncontrolled components?

Answer 1

controlled components
uncontrolled components primarily use React states

Question 2

What are some advantages of using uncontrolled components?

Answer 2

little less complex than controlled forms
ease of use

Question 3

What are some advantages of using controlled components?

Answer 3

use of ‘state’ and renders
gives access to values via state, real-time

Question 4

Which style do you prefer?

Question 5

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

Answer 5

value and onChange

Question 6

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

Answer 6

React Hook Form, Formik, and React Final Form

Question 7

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

Answer 7

When you want to display multiple, similar React components from a collection of data

Question 8

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

Answer 8

data-driven components revolve around the data itself/ what is displayed, so the content/ data must be the most important thing

Question 9

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

Answer 9

often, React list components will be created with the map() method and what is returned is the ul or li element at the end for where the list elements will go

Question 10

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

Answer 10

map()

Question 11

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

Answer 11

components in a list need unique keys so that if components in a array of data are moved, changed, get deleted, etc, the corresponding key will always know which data to refer to

Question 12

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

Answer 12

0 indexed keys

Question 13

What are two ways React components can interact?

Answer 13

passing properties from a parent component to children components, and by responding to Events from children components. (known as lifting state up)

Question 14

How can multiple React components share state?

Answer 14

via lifting state to the closest parent

Question 15

What are the steps to “lift state up”?

Answer 15

1. Remove state from the child components.
2. Pass hardcoded data from the common parent.
3. Add state to the common parent and pass it down together with the event handlers.

Question 16

When would you want to lift state up?

Answer 16

multiple similar components that you may want to use elsewhere, so you have the parent give functionality rather than hardcoded into child component

Question 17

When is a component “mounted” to the DOM?

Answer 17

mounts first and then deals with data after mounting

Question 18

What is a React Effect?

Answer 18

Effects will happen after initial rendering of component that synchronizes with a component in an external system (API, etc)

Question 19

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

Answer 19

when you need to connect with some outside component, vs when you use states

Question 20

When do Effects run?

Answer 20

runs after initial rendering phase

Question 21

What function is used to declare an Effect?

Answer 21

useEffect()

Question 22

What are Effect dependencies and how do you declare them?

Answer 22

second argument in useEffect that ensures the useEffect knows when to change the dependencies???

Question 23

Why would you want to clean up from an Effect?

Answer 23

making a request and component mounts again, if they are diff or error, clean up prevents any unnecessary events from happening

Question 24

How do you clean up from an Effect?

Answer 24

use:
return (() => {}) or return any function

Question 25

When does the cleanup function run?

Answer 25

React will call your cleanup function each time before the Effect runs again, and one final time when the component unmounts (gets removed).

Question 26

What is the purpose of the Express Static middleware?

Answer 26

serves ‘static’ files from the specified root directory

Question 27

What does express.static() return?

Answer 27

returns a function

Question 28

What are several examples of static files?

Answer 28

imgs, javascript, css, html

Question 29

What is a good way to serve application images using Express?

Answer 29

via app = express()
app.use(express.static(rootDirectory))

Question 30

What does fetch() return?

Answer 30

A Promise that resolves to a Response object.

Question 31

What is the default request method used by fetch()?

Answer 31

the get request method

Question 32

How do you specify the request method (GET, POST, etc.) when calling fetch?

Answer 32

as the second argument in fetch()

Question 33

How does fetch report errors?

Answer 33

ok property of the response is set to false if the response isn’t in the range 200–299

Question 34

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

Answer 34

can load other data after component has been rendered

Question 35

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

Answer 35

fetch()

Question 36

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

Answer 36

second argument has empty brackets []

Question 37

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

Answer 37

put data into dependency array (second argument in useEffect)

Question 38

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

Answer 38

React Query and Vercel SWR