React Questions

Question 1

When does ComponentDidMount occur?

Answer 1

ComponentDidMount occurs right after Render(), but it is only called the on initialization

Question 2

What method do all components have to have?

Answer 2

The only method that a component has to have to Render()

Question 3

What does setState() do?

Answer 3

SetState reconciles the new state object with the previous state. The purpose of this is to most efficiently update the DOM with only the necessary updates. Any components that have been changed will update.

Question 4

What is a component?

Answer 4

A component is a function or class that ultimately creates an element, which is what you see on the screen.

Question 5

What are refs?

Answer 5

Refs give you direct access to a DOM element. You create a ref and then pass it as a property of an element.

Question 6

What are keys?

Answer 6

Keys help react keep track of elements in a list. Each element must have a unique key among siblings.

Question 7

What is this.props.children?

Answer 7

What you place in between the element tags of a component, ie something can be accessed by the component via this.props.children. This can also be a component or a function.

Question 8

Controlled vs Uncontrolled Components

Answer 8

Controlled vs Uncontrolled components. Controlled components are entirely controlled by React. For example, form data is stored in the state. This allows for instant validation or button enabling/disabling. Uncontrolled components allow the data to remain in the DOM and the data is just fetched whenever it’s needed.

Question 9

When should you fetch initial data?

Answer 9

Fetching data should occur in the ComponentDidMount method. If your fetch resolves before the component mounts, you be setting state on a component that does not exist yet.

Question 10

Why use React.Children.map(props.children, () => ) over props.children.map()?

Answer 10

Props.children is an object if there is only one child, and it is an array if there are multiple children. You favor React.Children.map(props.children, () => ) over props.children.map() because the latter will break if the children are not an array.

Question 11

What does React.cloneElement() do?

Answer 11

React.cloneElement() is used to clone an element and pass it new props

Question 12

What is the second parameter of setState()?

Answer 12

setState’s second parameter is an optional callback function as it is async. This is however rarely used

Question 13

Besides an object, what else can you pass into setState()?

Answer 13

You can pass a function into setState. It is actually recommended if you are setting the new state based on the previous state.

Question 14

What are stateless components?

Answer 14

Stateless/functional components cannot use state or lifecycle methods. They’re useful for presentational components. They are simple, easy to test, and decoupled from the app. The only drawback is that you cannot define the shouldComponentUpdate method so it COULD be costly to your rendering, but probably not in a small scale.

Question 15

What are pure components?

Answer 15

PureComponents are good if your state and props are have a shallow data structure, as in there are no nested data structures. PureComponents will only rerender if there are shallow differences between prevState/prevProps and the new state/props.

Question 16

What are components?

Answer 16

Components are more expensive than PureComponents, as they will run a full reconciliation. This should be the default over PureComponents as the optimizations aren’t necessary most of the time. Optimization should be added as needed over from the very beginning

Question 17

What is shallow copying?

Answer 17

By default objects are shallow copied. Anything nested in the object are copied as pointers. Therefore, making changes to the copy will make changes to the original

Question 18

What are the 4 categories of lifecycle methods?

Answer 18

Mounting, Updating, Unmounting, Error-Handling

Question 19

What are the mounting lifecycle methods? In order.

Answer 19

Constructor, getDerivedStateFromProps, render, componentDidMount

Question 20

What are the updating lifecycle methods? In order

Answer 20

getDerivedStateFromProps, shouldComponentUpdate, render, getSnapShotBeforeUpdate, componentDidUpdate

Question 21

What are the unmounting lifecycle methods? In order.

Answer 21

componentWillUnmount

Question 22

What are the error-handling lifecycle methods? In order.

Answer 22

getDerivedStateFromError, componentDidCatch

Question 23

constructor()?

Answer 23

constructor() - This is when the component is initialized. This occurs before it is added to the dom. This is where you can bind methods and it is the only place you can directly change the state. (You must use setState() anytime after this.) This is not where you want to set up subscriptions or any event handlers as this occurs before the component is mounted.

Question 24

static getDerivedStateFromProps(props, state)?

Answer 24

static getDerivedStateFromProps(props, state) - This is not commonly used and when it is, it may not be the right tool. Basically, if you need to update the state based on changes to the props. It is called here before render and is first to be called when a component updates.

Question 25

render(), what can be rendered?

Answer 25

render() - This is where you return what the component should render. Most commonly, you’ll return JSX here, but you can also return numbers and strings, arrays, or a React.Fragment. You can also return null or a boolean to conditionally render. Render should be a pure function.

Question 26

componentDidMount()

Answer 26

componentDidMount() - This method is evoked immediately after the component is rendered to the DOM. This is the best place to set up your component as it is finally mounted. This is where you want to fetch your initial data, set up subscriptions, or show an initial modal

Question 27

shouldComponentUpdate()

Answer 27

shouldComponentUpdate() - this returns true or false, true by default. This let’s you write custom logic on whether or not the component should re-render. The update lifecycle methods happen whenever there is a change to the state or props of a component. You can cut down on re-renders by adding logic to determine if this component really does need to update. Perhaps you only want to rerender if an important piece of data has changed or you know that this component never needs to rerender, you could just return false.

Question 28

getSnapShotBeforeUpdate(prevProps, prevState)

Answer 28

getSnapShotBeforeUpdate(prevProps, prevState) - This lets you capture any data you want from the component before it rerenders. No need to capture data from prevProps/prevStates as those are passed to componentDidUpdate anyways. Even though this is occurring after render, it is the state of the component before it’s updated. Render is more like staging your changes and then those changes happen async. You can return any value here or null. Whatever is returned here can be used in the next method. This is a rare method, but it’s useful to capture any data that won’t be saved to your state.

Question 29

componentDidUpdate(prevProps, prevState, snapshot)

Answer 29

componentDidUpdate(prevProps, prevState, snapshot) - This method is called after the component updates. Also, rarely used, but can be used with snapshot. A use for these two methods would be in a scrolling chat room. You could store the total height of the previous messages then when a new message comes in you can calculate the difference between the new height of messages and the previous snapshot’s height. This is the amount the chat box needs to scroll to make room for the new message. This would allow you to not save this info to the state.

Question 30

componentWillUnmount()

Answer 30

componentWillUnmount() - This method is invoked immediately before the component unmounts. Unmount means it is removed from the DOM. Essentially, it dies. This is a good time to clean up event handlers, subscriptions, or cancel network requests.

Question 31

static getDerivedStateFromError(error)

Answer 31

static getDerivedStateFromError(error) - This method gets invoked when a descendant component throws an error. You can return an object from this method to set the state. The error is passed into it. For example, you can console log the error, and set the error in the state here.

Question 32

componentDidCatch(error, info)

Answer 32

componentDidCatch(error, info) - This is a good place to put external error logging.

Question 33

What is an ErrorBoundary?

Answer 33

Common practice is to create an ErrorBoundary component to wrap around your other components. Since a component can’t catch an error inside itself, you want to wrap a higher order component around it to catch any errors in the children. The error boundary would have these two methods and render this.props.children if no errors occurred. It could do a different behavior if it does encounter an error.