React.js

Question 1

What is React?

Answer 1

A front-end framework. It lets you use reusable components and makes it easier to implement interactive elements.

Question 2

What is a React element?

Answer 2

A custom written DOM element. 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.

Question 3

How do you mount a React element to the DOM?

Question 4

What is JSX?

Question 5

How does React use JSX to render components?

Question 6

What is a React component?

Question 7

How do you define a component in React?

Question 8

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

Question 9

What are props in React?

Answer 9

The react equivalent of HTML attributes.

Question 10

How do you use props in a component?

Answer 10

Write the name of the props inside curly braces { prop1, prop2 }. Destructure it.

Question 11

How do you pass props to a component?

Question 12

How do you write JavaScript expressions in JSX?

Answer 12

Within curly braces { }.

Question 13

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

Answer 13

You pass the prop for the event handler with a value of the event handler prop.
onXxx={handleXxx}

Question 14

What is the naming convention for event handlers?

Answer 14

React documentation suggests that Event Handlers be named handleXxx, where Xxx is the event it is handling. This is just a convention, but it aids code clarity.

Question 15

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

Answer 15

onClick, onSubmit, onChange, onMouseEnter,

Question 16

What is the naming convention for custom event handler props?

Answer 16

React documentation suggests that Event Handler props be named onXxx, where Xxx is the event. This is just a convention, but it aids code clarity.

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 all start with “use” followed by an uppercase letter.

Question 18

What are the “Rules of Hooks”?

Answer 18

Only call hooks at the top level, the first line after your react function and cannot be inside loops, conditions, or nested functions.
Only call hooks from react components or from other hooks.
Must start with “use” then an uppercase letter e.g. “useHook”

Question 19

What is the purpose of state in React?

Answer 19

1. A state variable to retain the data between renders.
2. A state setter function to update the variable and trigger React to render the component again.

Question 20

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

Answer 20

1. Local variables don’t persist between renders. When React renders this component a second time, it renders it from scratch—it doesn’t consider any changes to the local variables.
2. Changes to local variables won’t trigger renders. React doesn’t realize it needs to render the component again with the new data.

Question 21

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

Answer 21

1. It renders the component again.
2. Remembers the latest state value.

Question 22

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

Answer 22

The next time the component would render. On the re-render. The next time useState is called.

Question 23

How do controlled components differ from uncontrolled components?

Answer 23

Controlled components are controlled by the parent, e.g. the form while uncontrolled components are controlled by the child, e.g. the input element.

Question 24

What are some advantages of using uncontrolled components?

Answer 24

You don’t have to keep track of state with useState and just get the form data instead of each state variable.

Question 25

What are some advantages of using controlled components?

Question 26

Which style do you prefer?

Answer 26

Controlled components.

Question 27

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

Answer 27

value/checked 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 to display multiple similar components from a collection of data.

Question 30

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

Answer 30

So that the data is the only thing that changes and the components can be used for any set of data.

Question 31

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

Answer 31

Before the return of the jsx.

Question 32

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

Answer 32

map(), and also filter() then map().

Question 33

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

Answer 33

To uniquely identify it. Keys tell React which array item each component corresponds to, so that it can match them up later. This becomes important if your array items can move (e.g. due to sorting), get inserted, or get deleted. A well-chosen key helps React infer what exactly has happened, and make the correct updates to the DOM tree.

Question 34

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

Answer 34

1. Data from a database: If your data is coming from a database, you can use the database keys/IDs, which are unique by nature.
2. Locally generated data: If your data is generated and persisted locally (e.g. notes in a note-taking app), use an incrementing counter, crypto.randomUUID() or a package like uuid when creating items.

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 lift state up?

Question 39

When is a component “mounted” to the DOM?

Answer 39

When is appears on the page for the first time.

Question 40

What is a React Effect?

Answer 40

Effects let you run some code after rendering so that you can synchronize your component with some system outside of React.

Question 41

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

Answer 41

Effects let you specify side effects that are caused by rendering itself, rather than by a particular event.

Question 42

When do Effects run?

Answer 42

By default, Effects run after every render. You can tell React to skip unnecessarily re-running the Effect by specifying an array of dependencies as the second argument to the useEffect call. The dependency array can contain multiple dependencies. React will only skip re-running the Effect if all of the dependencies you specify have exactly the same values as they had during the previous render.

Question 43

What function is used to declare an Effect?

Answer 43

To declare an Effect in your component, import the useEffect Hook from React:

import { useEffect } from ‘react’;

Question 44

What are Effect dependencies and how do you declare them?

Answer 44

You can tell React to skip unnecessarily re-running the Effect by specifying an array of dependencies as the second argument to the useEffect call. The dependency array can contain multiple dependencies. React will only skip re-running the Effect if all of the dependencies you specify have exactly the same values as they had during the previous render.

Question 45

Why would you want to clean up from an Effect?

Answer 45

Release resources you have allocated in your useEffect function, to avoid memory leaks.

Question 46

How do you clean up from an Effect?

Answer 46

By returning a cleanup function from your Effect.

Question 47

When does the cleanup function run?

Answer 47

Before the cleanup function runs.

Question 48

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

Answer 48

fetch after mount

Question 49

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

Answer 49

fetch

Question 50

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

Answer 50

Have an empty dependency array.

Question 51

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

Answer 51

Have the data key in the dependency array.

Question 52

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

Answer 52

You manage all your data accesses with a 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 the parent component make some information available to any component in the tree below it—no matter how deep—without passing it explicitly through props.

Question 54

What values can be stored in context?

Answer 54

Anything, from variables to functions in the hierarchy. Context is not limited to static values. If you pass a different value on the next render, React will update all the components reading it below! This is why context is often used in combination with state.

Question 55

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

Answer 55

const context = createContext(defaultValue)

Question 56

How do you access the context values?

Answer 56

Call useContext at the top level of your component to read and subscribe to context.

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.

In general, if some information is needed by distant components in different parts of the tree, it’s a good indication that context will help you.

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 want to avoid duplicate code or to clean up duplicate code that makes code less readable. They are not required if they don’t call other hooks and are not needed if the code is used a couple times.

Question 60

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

Answer 60

1. React component names must start with a capital letter, like StatusBar and SaveButton. React components also need to return something that React knows how to display, like a piece of JSX.
2. Hook names must start with use followed by a capital letter, like useState (built-in) or useOnlineStatus (custom, like earlier on the page). Hooks may return arbitrary values.

Question 61

How do you call a custom hook?

Answer 61

The same way you call built in hooks. They must be at the top level and cannot be called conditionally.

Question 62

When do custom hooks execute?

Answer 62

When they are called.