JavaScript React

Question 1

What is React?

Answer 1

a framework that makes it easier to make reusable components. To make interactive code easier to write.

Question 2

What is a React element?

Answer 2

React apps are made out of components. A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page. A custom written DOM element.

Question 3

How do you mount a React component to the DOM? or
How do you insert/render a component to the DOM tree?

Question 4

What is JSX?

Answer 4

JSX stands for JavaScript XML.
JSX allows us to write HTML in React.
JSX makes it easier to write and add HTML in React.

Question 5

How does React use JSX to render components?

Question 6

What is a React component?

Answer 6

Reusable UI
React apps are made out of components. A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page. A custom written DOM element.

Question 7

How do you define a component in React?

Answer 7

a function whose name starts with a capital letter. the return should be JSX.

Question 8

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

Answer 8

attach it to the root. calls the function when it sees it wrapped in <>. Takes the result of calling the function and puts it in the DOM.

Question 9

What are props in React?

Answer 9

“Props” is a special keyword in React, which stands for properties and is being used for passing data from one component to another. But the important part here is that data with props are being passed in a uni-directional flow. ( one way from parent to child). Corresponds to attributes in HTML.

Question 10

How do you use props in a component?

Answer 10

destructure the props object in the parameter. or use the props object as a parameter.

Question 11

How do you pass props to a component?

Answer 11

in angle brackets, prop propertyname = value
in curly braces, call the component with arguments of values of the props.

Question 12

How do you write JavaScript expressions in JSX?

Answer 12

You write JavaScript expressions in JSX inside curly braces. {JAVASCRIPT EXPRESSION}

Question 13

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

Answer 13

pass your event handler as a prop to your component

Question 14

What is the naming convention for event handlers?

Answer 14

handleEvent() {

}

Question 15

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

Answer 15

onClick, onSubmit, onChange, onMouseEnter, onMouseLeave,

Question 16

What is the naming convention for custom event handler props?

Answer 16

onEventHandlerProps

Question 17

What are hooks in React?

Answer 17

Hooks are special functions that are only available while React is rendering. They let you “hook into” different React features.
they start with use followed by an uppercase letter. ie useState.

Question 18

What are the “Rules of Hooks”? (if necessary, re-read the “Pitfall” box in State)

Answer 18

Hooks—functions starting with use—can only be called at the top level of your components or your own Hooks. You can’t call Hooks inside conditions, loops, or other nested functions. You can only call them in react components and other hooks.

Question 19

What is the purpose of state in React?

Answer 19

to update a local data.
state holds the data inbetween function calls.

Question 20

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

Answer 20

it exists only within the block that it is declared in. Once that block ends, the variable is destroyed and its values lost”.

Question 21

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

Answer 21

triggers react to rerender again. updates a cashe of the state variable.

Question 22

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

Answer 22

on the re render.

Question 23

How do controlled components differ from uncontrolled components?

Answer 23

controlled components parent is in control.???
uncontrolled components are controlled by the input itself.???

Question 24

What are some advantages of using uncontrolled components?

Answer 24

you dont have to use useState. It is simpler, you can just grab the form data.

Question 25

What are some advantages of using controlled components?

Answer 25

Ui and data are in sync, when you update the UI, the data is updated at the same time. Anytime you have 2 components interacting with each other is a good time to use it.???

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

value and onChange

Question 28

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

Answer 28

The 3 most popular packages are React Hook Form, Formik, and React Final Form. React Hook Form is lightweight, performant, and easy to use, but it requires a version of React that supports hooks (v16.8 or higher). Since React hooks are fairly ubiquitous at this point, React Hook Form is an excellent choice. Formik handles complex forms well but is large and complex to use.

Question 29

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

Answer 29

When you want to make a list based off data.

Question 30

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

Answer 30

So that the only thing that changes is the data, and the markup looks the same

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

arrray.map()

Question 33

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

Answer 33

react needs know which is which.

Question 34

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

Answer 34

most of the time your data will have an id. so use that id.

Question 35

What are two ways React components can interact?

Answer 35

The two most common are by passing properties from a parent component to children components, and by responding to Events from children components.

Question 36

How can multiple React components share state?

Answer 36

Sometimes, you want the state of two components to always change together. To do it, remove state from both of them, move it to their closest common parent, and then pass it down to them via props. This is known as lifting state up, and it’s one of the most common things you will do writing React code.

Question 37

What are the steps to “lift state up”?

Answer 37

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 38

When would you want to lift state up?

Question 39

When is a component “mounted” to the DOM?

Answer 39

When the component appears on the page for the first time

Question 40

What is a React Effect?

Answer 40

block of code that runs after the page is rendered

Question 41

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

Answer 41

You do need Effects to synchronize with external systems. You don’t need Effects to transform data for rendering. You don’t need Effects to handle user events.
if all youre doing is updating state, dont use effect.

Question 42

When do Effects run?

Answer 42

after updating the DOM

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

used to tell react when an effect should run. declare dependencies in the second argument of the useEffect callback in an array.

Question 45

Why would you want to clean up from an Effect?

Answer 45

Cleaning up side effects in React is a way of stopping side effects that do not need to be executed anymore. Release resources that you have allocated. To avoid memory leaks.

Question 46

How do you clean up from an Effect?

Answer 46

return;

Question 47

When does the cleanup function run?

Answer 47

While it’s commonly known that the cleanup function runs when a component unmounts, it’s less commonly known that the cleanup function also runs after each re-render.

Question 48

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

Question 49

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

Answer 49

Fetch API

Question 50

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

Answer 50

empty array as second parameter

Question 51

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

Answer 51

type in the data key in an array as a second parameter

Question 52

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

Answer 52

Third party data management library. Some good open source packages are React Query and Vercel SWR work.

Question 53

What is the purpose of React “context”?

Answer 53

Context lets a parent component provide data to the entire tree below it.

Question 54

What values can be stored in context?

Answer 54

any value

Question 55

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

Answer 55

1. Create a context. (You can call it LevelContext, since it’s for the heading level.)
2. Use that context from the component that needs the data. (Heading will use LevelContext.)
3. Provide that context from the component that specifies the data. (Section will provide LevelContext.)
   const variable = createContext()

Question 56

How do you access the context values?

Answer 56

useContext

Question 57

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

Answer 57

Theming: If your app lets the user change its appearance (e.g. dark mode), you can put a context provider at the top of your app, and use that context in components that need to adjust their visual look.
Current account: Many components might need to know the currently logged in user. Putting it in context makes it convenient to read it anywhere in the tree. Some apps also let you operate multiple accounts at the same time (e.g. to leave a comment as a different user). In those cases, it can be convenient to wrap a part of the UI into a nested provider with a different current account value.
Routing: Most routing solutions use context internally to hold the current route. This is how every link “knows” whether it’s active or not. If you build your own router, you might want to do it too.
Managing state: As your app grows, you might end up with a lot of state closer to the top of your app. Many distant components below may want to change it. It is common to use a reducer together with context to manage complex state and pass it down to distant components without too much hassle.

Anytime you want to share data to alot of components and dont want to pass props all the way down a tree.

Question 58

What is a React custom hook?

Answer 58

a hook that you write that can call other hooks.

Question 59

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

Answer 59

When you dont want to duplicate code. You don’t need a custom hook when it doesn’t call another hook.

Question 60

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

Answer 60

Custom Hooks must be named starting with use followed by a capital letter.

Question 61

How do you call a custom hook?

Answer 61

Same why you call a regular hook. Call at the top level which means it cannot be conditionally called.

Question 62

When do custom hooks execute?

Answer 62

All Hooks re-run every time your component re-renders or when they’re called.

Question 63

In JavaScript, when is scope determined?

Answer 63

happens at parse time.

Question 64

What allows JavaScript functions to “remember” values from their surroundings?

Answer 64

Closure

Question 65

What values does a closure contain?

Answer 65

All variables and function that are in it’s parents scope that is used by the function.

Question 66

When is a closure created?

Answer 66

Every time a function reference is created which is at runtime.

Question 67

How can you tell if a function will be created as a closure?

Answer 67

Anytime a function needs to use variables that are outside its scope.

Question 68

In React, what is one important case where you need to know if a closure was created?

Answer 68

When there’s a useEffect,
if you have a function that is a dependency in your useEffect, you have to care if a closure was created

Question 69

What is Closure?

Answer 69

The key to remember is that when a function gets declared, it contains a function definition and a closure. The closure is a collection of all the variables in scope at the time of creation of the function.