React

topics

1. Key Concept behind React

2. React Component Patter

3. How to avoid re-rendering

Key concept behind React

React is a library to display UI efficiently and it is not MVC framework. Here are the basic concepts of React and technology behind it.

• JSX

JSX is XML like syntax sugar to markup UI. By using babel, JSX code is transpiled to pure javascript object.

• Virtual DOM

The virtual DOM is a Javascript object and a representation of a UI that kept in memory and synced with the "real" DOM.

• Single way data binding

Unlike Angular, React is single data binding flow and application state is passed to child components. "props" are immutable.

• Reconciliation

Manipulating real DOM is slow and uses much of memory wastage. Like DOM tree traversing and inserting DOMs at certain place. React calculates the difference between previous UI by comparing virtualDOM and state and current ones, which is called "Reconciliation". React takes virtual DOM snapshot before it updates state or props. By reconciliation mechanism, React only re-render necessary UI parts as it needs.

Why setting "Key" is important?

Since React does reconciliation, we need to provide a unique key in order that React knows which content is changed and needs to be re-rendered. You should add keys when you display items on list.

What happens when you call setState?

setState is important function. It is basically merge new state to existing state. More importantly, it fires reconciliation process after merging state, run some lifecycle methods, and update UI based on new state.

What are React lifecycle methods?

React component lifecycle methods are the methods automatically called when components are mounted, updated, unmounted.

Mounting phase

1. Initialize / Construction

2. getDefaultProps()(React.createClass) _or MyComponent.defaultProps(ES6 class)_
3. getInitialState()(React.createClass) _orthis.state = ...(ES6 constructor)_
4. componentWillMount()
5. render()
6. Children initialization & life cycle kickoff
7. componentDidMount()

Update (props or state are changed)

1. componentWillReceiveProps()

2. shouldComponentUpdate()

3. componentWillUpdate()

4. render()

5. Children Life cycle methods

6. componentDidUpdate()

Un-Mounting

1. componentWillUnmount()

2. Children Life cycle methods
3. Instance destroyed for Garbage Collection

There is the methods from which you should not call setState()method. It will break your app because of running infinite loop unintentionally.

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

React Element

React Element is plain Javascript object which represents Virtual DOM. The object consist of ''key", "props", "ref", and "type". There is no method on the object.

// This uses JSX syntax.
var helloWorld = <div>Hello World!</div>;

// Which is equal to below.
// And this is what the JSX syntax compiles into in JavaScript:
var helloWorld = React.createElement(
  "div",
  null,
  "Hello World!"
);

//======================= 
// It turns to...
//=======================

// a plain old JavaScript object that looks something like this:
var helloWorld = {
  key: null,
  props: {
    children: "Hello World!" // more stuff in here
  },
  ref: null,
  type: "div"
    // more stuff in here
};

React Component

class Hello extends React.Component {
  render() {
    return (
      <div>
        Hello
      </div>
    )
  }
}

//or 

React.createClass()

React Component generates an instance of React component class which will be returned from ReactDOM.render().

https://medium.com/@fay_jai/react-elements-vs-react-components-vs-component-backing-instances-14d42729f62

What are refs in React and why are they important?

Refs are the way to access to a DOM node or an instance of a component in React. We should not use string ref but callback ref.

// DO
render() {
  return (
    <input ref={(ref)=> {this._input = ref}} />
  )
}

// DON'T
render() {
  return (
    <input ref="input" />
  )
}

What is the difference between a controlled component and an uncontrolled component?

https://reactjs.org/docs/uncontrolled-components.html

Controlled Component is the React components that have form functionality and its value is controlled by React. For example, you can listen input changes through event and store the new input to React State. If you do this way, the input is controlled component. Uncontrolled component is that the form React Component whose value is not controlled by React but DOM. The elements connected "form state management library" such as Redux-Form is also controlled component.

// Controlled Component

class Form extends React.Component {
  this.state = {
    firstName: "",
    lastName: ""
  }

  render() {
    const onChangeFirstName = (value) => { this.setState({ firstName: value }) }
    const onChangeLastName = (value) => { this.setState({ lastName: value })}

    return (
      <form>
        <input type="text" onChange={onChangeFirstName}>
        <input type="text" onChange={onChangeLastName}>
      </form>
    )
  }
}