React Part III

Question 1

What is lifecycle methods ?

Answer 1

Special methods built-in to React, used to operate on components throughout their duration in the DOM

Question 2

Lifecycle methods are called in what order ?

Answer 2

class App extends Component {
  constructor() {
    // here is our constructor lifecycle method
  }

  componentDidMount() {
    // here is anything we want to happen 
    // immediately after the component renders
    // (e.g. grab our AJAX data)
  }

  componentDidUpdate() {
    // here is anything we want to happen 
    // when a component is updated 
    // (e.g. when props or state change)
  }

  render() {
    // here are any DOM elements 
    // we want to display on the page
  }
}

Question 3

What is constructor ?

Answer 3

A constructor is a method that is called automatically when we created an object from that class. It can manage initial initialization tasks such as defaulting certain object properties or sanity testing the arguments passed in.

Question 4

Renders()

Answer 4

This is where you determine what gets displayed to the page.

Question 5

componentDidMount()

Answer 5

It runs immediately after the component has mounted.

same as useEffect with an empty dependency array

Question 6

ComponentDidUpdate

Answer 6

When a component updates when a prop or states change
similar to useEffect with [depencies array] (useEffect can seperate)

componentDidUpdate() {
  // Some updating logic
  // Some other updating logic
}

// The above is roughly(!) the same as:
useEffect( () => {
  // Some updating logic
}, [someDependency])

useEffect( () => {
  // Some other updating logic
}, [anotherDependency])

Question 7

ComponentWillUnmount

Answer 7

Just before a class component is unmounted from the DOM
same as useEffect cleanup 

componentWillUnmount() {
  // Some code to run before the component unmounts
}

// The above is the same as:
useEffect( () => {

  return () => {
    // Some code to run before the component unmounts
  }
}, [])

Question 8

useReducer

Answer 8

alternative to useState when you have complex state logic (take in state and action) as argument and return a newState

Question 9

useCallback

Answer 9

return a memoized callback function (look like useEffect with [dependencies], that only changes if one of the dependencies has changed
- use to prevent unnecessary re-render(shouldComponentUpdate)

Question 10

useMemo

Answer 10

Returns a memoized value.

Pass a “create” function and an array of dependencies.

Question 11

What is the difference between Element and Component?

Answer 11

An Element is a plain object describing what you want to appear on the screen - createElements return an object (cant be mutated) - render to screen using render()
Components can be declared in different ways: class, function, take props as input and return JSX tree as output

Question 12

Pure Components ?

Answer 12

exactly same as react components except that it handles shouldComponentUpdate.
Pure component do comparison on both props and state
Component wont compare, default re-render whenever shouldComponentUpdate is called

Question 13

State

Answer 13

an object that holds some information that may change over the lifetime of a component

Question 14

Best practices for state

Answer 14

Keep state as simple as possible

Minimize the number of stateful components.

Question 15

how virtual dom work ?

Answer 15

3 steps:
When data change, ui is rerended using virtual dom
Differences between virtual dom and previous dom is calculated
Once calculations are done, real dom will be updated with change