ReactJS Flashcards Preview

Personal 101 > ReactJS > Flashcards

Flashcards in ReactJS Deck (21)
Loading flashcards...
1
Q

What is a React Element

A

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

2
Q

What is a React Component

A

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.

3
Q

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

A

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

4
Q

What are keys

A

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

5
Q

What is a Controlled Component?

A

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

6
Q

What is an Uncontrolled Component?

A

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

(accomplished by refs)

7
Q

What are refs

A

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} />

8
Q

What are Keys in React?

A

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

9
Q

What are the different states of the React Lifecycle?

A

Mounting
Updating
Unmounting
Error Handling

10
Q

What are the different Lifecycle events offered for Components?

A
componentWillMount
componentDidMount
componentWillReceiveProps
componentWillUpdate
componentDidUpdate
shouldComponentUpdate
componentWillUnmount
render
11
Q

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

A

componentWillMount
render
componentDidMount

12
Q

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

A
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
13
Q

What are the order of Lifecycle events in the Unmounting state

A

componentWillUnmount

14
Q

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

A

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

15
Q

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

A

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

16
Q

What does shouldComponentUpdate do and why is it important?

A

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.

17
Q

What is a SyntheticEvent

A

Cross-Browser event wrapper

18
Q

What is SyntheticEvent

A

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

19
Q

What does createElement do?

A

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

20
Q

What does cloneElement do?

A

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

21
Q

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

A

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.