ReactJS

Question 1

What is a React Element

Answer 1

An object representation of some UI component. It describes what you want to see on screen.

Question 2

What is a React Component

Answer 2

A function or a class which optionally accepts input and returns a React Element (via JSX).

Encapsulated unit of code which has a function on the frontend.

Question 3

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

Answer 3

You use a Class Component if you wish to track state, otherwise you’d use Functional.

Question 4

What are keys

Answer 4

Keys are what help React keep track of what items have changed, been added, or been removed from a list

Question 5

What is a Controlled Component?

Answer 5

A component where React (Virtual DOM) is in control of the component, as opposed to the native DOM.

Question 6

What is an Uncontrolled Component?

Answer 6

A component where data is handled by the native DOM as opposed to letting React (Virtual DOM) be in control.

(accomplished by refs)

Question 7

What are refs

Answer 7

refs are an “escape hatch” which allow direct access to the native DOM. It is achieved by adding the “ref” attribute to a component.

ref’s value is a callback function where the underlying DOM element of what React is representing is returned.

this.input = input} />

Question 8

What are Keys in React?

Answer 8

Keys are essentially unique identifiers for each element that has been changed, added, or removed from a list <li>

Question 9

What are the different states of the React Lifecycle?

Answer 9

Mounting
Updating
Unmounting
Error Handling

Question 10

What are the different Lifecycle events offered for Components?

Answer 10

componentWillMount
componentDidMount
componentWillReceiveProps
componentWillUpdate
componentDidUpdate
shouldComponentUpdate
componentWillUnmount
render

Question 11

What are the order of Lifecycle events in the Mounting state?

Answer 11

componentWillMount
render
componentDidMount

Question 12

What are the order of Lifecycle events in the Updating state?

Answer 12

componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

Question 13

What are the order of Lifecycle events in the Unmounting state

Answer 13

componentWillUnmount

Question 14

In which lifecycle event do you make AJAX requests and why?

Answer 14

componentDidMount
Guarantee that AJAX doesn’t resolve before the component mounts
Newest React sometimes overcalls componentWillMount, so avoid multiple calls.

Question 15

Why would you use
React.Children.map(props.children, () => )
instead of props.children.map(() => )

Answer 15

You can’t gauarntee that props.children will be an array, so React gives you React.Children.map as a safeguard.

Question 16

What does shouldComponentUpdate do and why is it important?

Answer 16

Determines if Reconciliation should be used to update certain elements of the DOM.
Returning false from this would make a statement to React that this component will never likely change ever, maximizing the overall efficiency of React.

Question 17

What is a SyntheticEvent

Answer 17

Cross-Browser event wrapper

Question 18

What is SyntheticEvent

Answer 18

Cross-Browser wrapper around the browser’s native event.

These synthetic events have the same interface as native events you’re used to, except they work identically across all browsers

Question 19

What does createElement do?

Answer 19

createElement is what JSX gets transpiled to and is what React uses to create React Elements

Question 20

What does cloneElement do?

Answer 20

cloneElement is used in order to clone an element and pass it new props

Question 21

What is the second argument that can optionally be passed to setState and what is its purpose?

Answer 21

A callback function which will be invoked when setState has finished and the component is re-rendered.

Since setState is asynchronous, it’s second argument is a callback function.