Senior Side Week 4

Question 1

When is a component “mounted” to the DOM?

Answer 1

When the component appears on the page for the first time.

Question 2

What is a React Effect?

Answer 2

In React, an effect is a function that is executed automatically by React after rendering and updating a component. Effects are typically used for performing side-effects in response to changes in a component’s state or props.

Question 3

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

Answer 3

Effects should be used in React components when you need to execute some side-effect, such as updating the DOM, fetching data from an API, setting up event listeners, or updating the component’s state or props in response to changes.

If there is no external system involved (for example, if you want to update a component’s state when some props or state change), you shouldn’t need an Effect.

Question 4

When do Effects run?

Answer 4

In React, effects run after every render of a component by default. This includes the initial render and subsequent re-renders due to changes in the component’s state or props.

Question 5

What function is used to declare an Effect?

Answer 5

useEffect();

Question 6

What are Effect dependencies and how do you declare them?

Answer 6

In React, effect dependencies are used to tell React when an effect should run. Effect dependencies are specified as an array of values that are passed as the second argument to the useEffect hook.

When an effect is declared, React will compare the previous dependencies array to the current dependencies array. If any of the values in the current dependencies array are different from the previous dependencies array, React will run the effect function again.

Question 7

Why would you want to clean up from an Effect?

Answer 7

Some Effects need to specify how to stop, undo, or clean up whatever they were doing.

Removing event listeners: If you set up event listeners in an effect, you should also remove them in a cleanup function to prevent memory leaks and unexpected behavior.

Cancelling network requests: If you fetch data from an API in an effect, you should also cancel the request in a cleanup function to prevent memory leaks and to ensure that the data is not updated after the component unmounts.

Cleaning up timers and intervals: If you use timers or intervals in an effect, you should also clear them in a cleanup function to prevent memory leaks and unexpected behavior.

Question 8

How do you clean from an Effect?

Answer 8

To clean up from an effect, you can return a function from the effect function that will be executed when the component unmounts or when the effect is re-run. This function is called the cleanup function.

Question 9

When does the cleanup function run?

Answer 9

React will call your cleanup function each time before the Effects run again, and one final time when the component unmounts (get removed).

Question 10

What is the purpose of the Express Static middleware?

Answer 10

To serve static files such as images, CSS files, Javascript files, use the express static built-in middleware function in Express. Express stattic sets up middleware that checks to see if a file exists and then calls the sendFile on it.

Question 11

What does express.static() return?

Answer 11

It returns a middleware function.

Question 12

What are several examples of static files?

Answer 12

HTML files, CSS files, JavaScript files, images

Question 13

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

Answer 13

Use the express static-built in middleware function.

Question 14

What does ‘fetch()’ return?

Answer 14

It returns a promise that resolves with a response (a representation of the entire HTTP response)object

Question 15

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

Answer 15

Get

Question 16

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

Answer 16

The second parameter of the function.
An object containing any custom settings that you want to apply to the request.

For example:
method: “POST”

Question 17

How does ‘fetch’ report errors?

Answer 17

If response ok is false. It becomes false when it status code is not in the 200 range.

Question 18

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

Answer 18

useEffect hook is used to fetch data from an API when the component mounts

Question 19

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

Answer 19

fetch() function is used to make HTTP requests in react.

Question 20

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

Answer 20

You can use useEffect to load component data just once when the component mounts by passing an empty dependency array ([]) as the second argument to the useEffect function. This tells React that the effect should only run once, when the component mounts.

Question 21

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

Answer 21

Include the data in the dependency array of the ‘useEffect’ function.

Question 22

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

Answer 22

React Query and Vercel SWR

Question 23

What is the purpose of React “context”?

Answer 23

Data is usually passed from parent component to children components. This can be inconvenient keeping track of props so React created ‘context’ to allow data to be managed by one component but easily shared with multiple components

Question 24

What values can be stored in context?

Answer 24

Any data type can be stored in context.

Ex:
userId, theme, language preferences, global state, functions

Question 25

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

Answer 25

Create a separate file for context.
1) Create a context by using createContext() and assign it to a const variable
2) Use that context from the component that needs the data using useContext()
3) Provide that context from the component that specifies the data. Wrap with the contextname.provider with a value prop.

Question 26

How do you access the context values?

Answer 26

You can access the values stored in context using the ‘useContent’ hook.

Question 27

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

Answer 27

Themes such as dark or light.

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.

For 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.

Question 28

What is a React custom hook?

Answer 28

A React custom hook is a JavaScript function that starts with the word “use” and uses one or more built-in hooks or other custom hooks to provide some functionality that can be reused across multiple components in a React application.

Custom hooks are a way to share logic between components without duplicating code or using higher-order components, render props, or mixing. They encapsulate a certain behavior and expose an interface that allows other components to use it.

It is a hook that you write and you can call other hooks in there.

Question 29

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

Answer 29

In summary, custom hooks are useful when you need to share functionality between multiple components or abstract complex logic. However, they are not always required and might be overkill for simple functionality or small codebases.

You don’t need to have a custom hook when it doesn’t call another hook.

Question 30

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

Answer 30

the hook must start with ‘use’ followed by a capital letter

Question 31

How do you call a custom hook?

Answer 31

It’s important to note that custom hooks should only be called at the top level of a functional component or another custom hook. They should not be called inside loops, conditions, or nested functions.

Usually destructured the values.

Question 32

When do custom hooks execute?

Answer 32

Custom hooks execute whenever they are called within a component. Like other React hooks, custom hooks run during the rendering phase of a component.

When a custom hook is called, its code is executed from top to bottom. If the custom hook uses other hooks, those hooks will be called as well. React ensures that hooks are called in the same order on every render.

One important thing to note is that each call to a custom hook creates a new instance of the internal state associated with that hook. This means that the state of one instance of the custom hook does not affect the state of another instance of the same hook.