React

Question 1

Why do you need to import React in order to use JSX?

Answer 1

Because Babel transpiles JSX into React.createElement( )

Question 2

Why do React component names need to start with a capital letter?

Answer 2

Because this is how React knows it is a React component. Otherwise, it would render it as an HTML tag (i.e., class thing would be rendered as ).

Question 3

What component lifecycle method(s) are triggered when a component is mounted?

Answer 3

1. constructor( ) 2. getDerivedStateFromProps( ) (static) 3. render( ) 4. componentDidMount( )

Question 4

What component lifecycle method(s) are triggered when a component is updated?

Answer 4

1. getDerivedStateFromProps( ) 2. shouldComponentUpdate( ) 3. render( ) 4. getSnapshotBeforeUpdate( ) 5. componentDidUpdate( )

Question 5

What component lifecycle method(s) are triggered when a component is unmounted?

Answer 5

componentWillUnmount( )

Question 6

What component lifecycle method(s) are triggered when a component encounters an error during a lifecycle method?

Answer 6

componentDidCatch( )

Question 7

Why should you fetch data in componentDidMount and not the constructor?

Answer 7

Because the data you need to render might not be available when the component is rendering. By fetching in componentDidMount, the component can render once safely without the fetched data and then again once it has been placed into state.

Question 8

How might you benefit from “lifting the state up” in a React application.

Answer 8

Placing state high enough allows state values to be shared by sibling components. It also allows you to create purely presentational components.

Question 9

What is the purpose of useEffect’s return value?

Answer 9

If you return a function from useEffect, React runs it when the component unmounts.

For example, if you add a scroll listener as part of useEffect, you can remove that listener by returning a cleanup function that calls removeEventListener.