Tyler McGinnis Interview Questions

Question 1

What happens when you call setState?

Answer 1

The first thing React will do when setState is called is merge the object you passed into setState into the current state of the component. This will kick off a process called reconciliation. The end goal of reconciliation is to, in the most efficient way possible, update the UI based on this new state. To do this, React will construct a new tree of React elements (which you can think of as an object representation of your UI). Once it has this tree, in order to figure out how the UI should change in response to the new state, React will diff this new tree against the previous element tree. By doing this, React will then know the exact changes which occurred, and by knowing exactly what changes occurred, will able to minimize its footprint on the UI by only making updates where absolutely necessary.

Question 2

What’s the difference between an Element and a Component in React?

Answer 2

Simply put, a React element describes what you want to see on the screen. Not so simply put, a React element is an object representation of some UI.

A React component is a function or a class which optionally accepts input and returns a React element (typically via JSX which gets transpiled to a createElement invocation).

Question 3

When would you use a Class Component over a Functional Component?

Answer 3

If your component has state or a lifecycle method(s), use a Class component. Otherwise, use a Functional component.

Question 4

What is the Virtual DOM?

Answer 4

A JavaScript representation of the actual DOM.

Question 5

What is React.Component?

Answer 5

The way to create a new component.

Question 6

What is the render ( … method …) ?

Answer 6

Describes what the UI will look like for that component. Every component is required to have a render mkethod.

Question 7

What does ReactDOM.render do?

Answer 7

Renders a React component to a DOM node.

Question 8

What is ‘state’?

Answer 8

The internal data store (object) of a component.

Question 9

What is ‘constructor (this.state)’?

Answer 9

The way in which you establish the initial state of a component.

Question 10

What does ‘setState’ do?

Answer 10

This is a helper method used for updating the state of a

component and re-rendering the UI

Question 11

What are ‘props’?

Answer 11

The data which is passed to the child component

from the parent component.

Question 12

What are ‘propTypes’?

Answer 12

Allows you to control the presence, or types of

certain props passed to the child component.

Question 13

What are ‘defaultProps’?

Answer 13

Allows you to set default props for your component.

Question 14

What is the Component Lifecycle?

Answer 14

• componentDidMount — Fired after the component is mounted
  
  • componentWillUnmount — Fired before the component will unmount
  • getDerivedStateFromProps - Fired when the component mounts and
    whenever the props change. Used to update the state of a component when its props change

Question 15

What are the component events?

Answer 15

• onClick
  
  • onSubmit
  • onChange

Question 16

What happens after a user event in React?

Answer 16

Some user event which changes the state of your app → Re-render virtual DOM -> Diff previous virtual DOM with new virtual DOM -> Only update real DOM with necessary changes.

Question 17

What do we use to transform JSX to JS?

Answer 17

Webpack and Babel.

Question 18

What is JSX?

Answer 18

Allows us to write HTML like syntax which gets transformed

to lightweight JavaScript objects.

Question 19

What is ‘this.state’?

Answer 19

Any data you put on this.state inside of the constructor will be part of that component’s state.

Question 20

How does a component modify it’s own internal state?

Answer 20

We do this with a method called setState. ‘setState’ is a signal to notify our app some data has changed. Whenever setState is called, React creates a new virtual DOM, does the diff, then updates the real DOM.

Question 21

Describe componentDidMount

Answer 21

Invoked once after the initial render. Because the component has already been invoked when this method is invoked, you have access to the virtual DOM if you need it. You do that by calling this.getDOMNode(). So this is the lifecycle event where you’ll be making your AJAX requests to fetch some data.*

Question 22

Describe componentWillUnmout

Answer 22

This life cycle method is invoked immediately before a component is unmounted from the DOM. This is where you can do necessary clean up.

Question 23

Describe getDerivedStateFromProps

Answer 23

Sometimes you’ll need to update the state of your component based on the props that are being passed in. This is the lifecycle method in which you’d do that. It’ll be passed the props and the state, and the object you return will be merged with the current state.

Question 24

Describe the render() method

Answer 24

The Render method in a React component needs to be a pure function. That means it needs to be stateless, it needs to not make any Ajax requests, etc. It should just receive state and props and then render a UI.

Question 25

What are Lifecycle methods?

Answer 25

Lifecycle methods are special methods each component can have that allow us to hook into the views when specific conditions happen (i.e. when the component first renders or when the component gets updated with new data, etc).

Question 26

What did React Router v4 accomplish?

Answer 26

This version of React Router rewrote everything as just components.

Question 27

What do we need to do to make React Router work?

Answer 27

BrowserRouter allows React Router to pass the app’s routing information down to any child component it needs (via context). So to make React Router work, you’ll need to render BrowserRouter at the root of your application.Ex:
import {
  BrowserRouter as Router,
  Route,
  Link,
} from 'react-router-dom'