React Flashcards

1
Q

What is React?

A

a front end framework that makes reusable components

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What is a React element?

A

a component essentially a custom written DOM element

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

How do you mount a React element to the DOM?

A
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What is JSX?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

How does React use JSX to render components?

A
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What is a React component?

A

reusable UI elements for your app

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

How do you define a component in React?

A

function name starting with a capital letter

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

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

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What are props in React?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

How do you use props in a component?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

How do you pass props to a component?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

How do you write JavaScript expressions in JSX?

A
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

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

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What is the naming convention for event handlers?

A

uses the word handle

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

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

A
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What is the naming convention for custom event handler props?

A
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

What are hooks in React?

A

useState and any other function starting with “use”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

What are the “Rules of Hooks”?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

What is the purpose of state in React?

A

To hold data for you between renders or function calls

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

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

A

because the variable gets refreshed to its local state

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

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

A

it triggers React to render again and

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

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

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

How do controlled components differ from uncontrolled components?

A

uncontrolled components takes care of its own states while controlled components

24
Q

What are some advantages of using uncontrolled components?

A

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

25
Q

What are some advantages of using controlled components?

A

the UI and data are synced

26
Q

Which style do you prefer?

A
27
Q

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

A

set value and onChange

28
Q

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

A

React Hook Form, Formik, and React Final Form

29
Q

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

A

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

30
Q

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

A

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

31
Q

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

A

inside the function body

32
Q

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

A

Array.map()

33
Q

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

A

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

34
Q

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

A

an ID

35
Q

What are two ways React components can interact?

A
36
Q

How can multiple React components share state?

A
37
Q

What are the steps to “lift state up”?

A
38
Q

When would you want to life state up?

A
39
Q

When is a component “mounted” to the DOM?

A

when it appears on the screen for the first time

40
Q

What is a React Effect?

A

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

41
Q

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

A
42
Q

When do Effects fun?

A

after the page renders and runs if its dependencies change

43
Q

What function is used to declare an Effect?

A

useEffect

44
Q

What are Effect dependencies and how do you declare them?

A

effect dependencies ar

45
Q

Why would you want to clean up from an Effect?

A

to release resources that you have allocated

46
Q

How do you clean up from an Effect?

A

return a

47
Q

When does the cleanup function run?

A

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

48
Q

What is the purpose of React “context”?

A

get data from components that is a child

49
Q

What values can be stored in context?

A

anything you want

50
Q

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

A

createContext and need to import the function from React

51
Q

How do you access the context values?

A

you export it

52
Q

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

A

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

53
Q

What is a React custom hook?

A

a hook that you write and it can call other hooks

54
Q

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

A

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

55
Q

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

A

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

56
Q

How do you call a custom hook?

A

must be top level and can’t be conditionally called

57
Q

When do custom hooks execute?

A

when the components are rendered or when you call them