React

Question 1

What is React?

Answer 1

a front end framework that makes reusable components

Question 2

What is a React element?

Answer 2

a component essentially a custom written DOM element

Question 3

How do you mount a React element to the DOM?

Question 4

What is JSX?

Answer 4

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

Question 5

How does React use JSX to render components?

Question 6

What is a React component?

Answer 6

reusable UI elements for your app

Question 7

How do you define a component in React?

Answer 7

function name starting with a capital letter

Question 8

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

Answer 8

attach it to the root does a function call and returns the html element

Question 9

What are props in React?

Answer 9

data used to communicate from parent components to child components similar to attributes

Question 10

How do you use props in a component?

Answer 10

pass prop as a parameter and in the code block destructure it and equal it to prop

Question 11

How do you pass props to a component?

Answer 11

it looks similar to html and you can pass it in your jsx with curly braces or quotes. any JavaScript expression inside the curly braces

Question 12

How do you write JavaScript expressions in JSX?

Question 13

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

Answer 13

you pass the event handling function into the component as one the the props and it gets called when the event happens

Question 14

What is the naming convention for event handlers?

Answer 14

uses the word handle

Question 15

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

Question 16

What is the naming convention for custom event handler props?

Question 17

What are hooks in React?

Answer 17

useState and any other function starting with “use”

Question 18

What are the “Rules of Hooks”?

Answer 18

only available while React is rendering, have to be declared at the top, you have to use “use”, hooks all must be called, can’t be called in loops, conditions, or other nested functions. Can only be called in React components or nested hooks.

Question 19

What is the purpose of state in React?

Answer 19

To hold data for you between renders or function calls

Question 20

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

Answer 20

because the variable gets refreshed to its local state

Question 21

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

Answer 21

it triggers React to render again and

Question 22

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

Answer 22

on the re-render or the next time the useState is called

Question 23

How do controlled components differ from uncontrolled components?

Answer 23

uncontrolled components takes care of its own states while controlled components

Question 24

What are some advantages of using uncontrolled components?

Answer 24

you don’t have to maintain state and you can just grab the data

Question 25

What are some advantages of using controlled components?

Answer 25

the UI and data are synced

Question 26

Which style do you prefer?

Question 27

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

Answer 27

set value and onChange

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 want a dynamic list of components and you would want a dynamic list when you are building your list based off of data

Question 30

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

Answer 30

it adjusts and adapts to the data rather than hard coding everything

Question 31

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

Answer 31

inside the function body

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

key is necessary when the list is dynamic and the list grows or shrinks and so the key is there to help better find them

Question 34

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

Answer 34

an ID

Question 35

What are two ways React components can interact?

Question 36

How can multiple React components share state?

Question 37

What are the steps to “lift state up”?

Question 38

When would you want to life state up?

Question 39

When is a component “mounted” to the DOM?

Answer 39

when it appears on the screen for the first time

Question 40

What is a React Effect?

Answer 40

a block of code that runs after all the components have rendered

Question 41

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

Question 42

When do Effects fun?

Answer 42

after the page renders and runs if its dependencies change

Question 43

What function is used to declare an Effect?

Answer 43

useEffect

Question 44

What are Effect dependencies and how do you declare them?

Answer 44

effect dependencies ar

Question 45

Why would you want to clean up from an Effect?

Answer 45

to release resources that you have allocated

Question 46

How do you clean up from an Effect?

Answer 46

return a

Question 47

When does the cleanup function run?

Answer 47

when dismounted (gets removed) and before the Effect runs again

Question 48

What is the purpose of React “context”?

Answer 48

get data from components that is a child

Question 49

What values can be stored in context?

Answer 49

anything you want

Question 50

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

Answer 50

createContext and need to import the function from React

Question 51

How do you access the context values?

Answer 51

you export it

Question 52

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

Answer 52

anytime when you want to share data to a bunch of components

Question 53

What is a React custom hook?

Answer 53

a hook that you write and it can call other hooks

Question 54

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

Answer 54

when you don’t want to duplicate code and they are not required when they are not calling other hooks

Question 55

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

Answer 55

starts with “use” followed by a uppercased word taking whatever parameters you want and returns whatever you want it to return

Question 56

How do you call a custom hook?

Answer 56

must be top level and can’t be conditionally called

Question 57

When do custom hooks execute?

Answer 57

when the components are rendered or when you call them