Component keywords [React]

All of the React Component keywords

Components let you split the UI into independent, resuable pieces, and think about each piece in isolation.

When you use Class Component, you must define 'render()'

constructor()

The contructor for a React component is called before it is mounted.
Typically, in React constructors are only used for two purposes:

• Initializing local state by assigning an objecct to this.state.
• Binding event handler methods to an instance.

constructor(props) {
    super(props);
    // Dont call this.setState() here!
    this.state = { count: 0};
    this.handleClick = this.handleClick.bind(this);
}

Constructor is the only place where you should assign this.state directly. In all other methods, you need use this.setState() instead.

render()

The render() function should be pure, meaning that it does not modify component state, it returns the same result each time it's invoked, and it does not directly interact with the browser.

Component lifecycle

componentDidMount()

'componentDidMount()' is invoked immediately after a component is mounted (inserted into the tree).

componentDidUpdate()

'componentDidUpdate()' is invoked immediately after updating occurs. This method is not called for the initial render.

Use this as an opportunity to operate on the DOM when the component has been updated.
This is also a good place todo network requests as long as you compare the current props to previous props.

componentDidUpdate(prevProps) {
    // Typical usage (dont forget to compare props):
    if (this.props.userID !== prevProps.userID) {
        this.fetchData(this.props.userID);
    }
}

componentWillUnmount()

This invoked immediately before a component is unmounted and destroyed.
Perform any necessary cleanup in this method, such as invalidating timers, canceling network requests, or cleaning up any subscriptions that were created in 'componentDidMount()'.

Stateful and Stateless Components

Stateful has state. That means the stateful components are keeping track of changing data. while stateless component print out what is given to them via props, or they always render the same thing.

Stateful/Container/Smart component

• There is few markup using JSX.
• Fetching datas for 'render' using Ajax request or HOC
• Can exists state for data Fetcing

class UserListContainer extends React.Component {
    constructor() {
        super();
        this.state = { users: [] }
    }

    componentDidMount() {
        fetchUsers(users => this.setState({ users }));
    }

    render() {
        return <UserList users={this.state.users} />
    }
}

Stateless/Presentational/Dumb component

• There exists markup using JSX
• Expect there is already data for 'render'
• Can exists states for UI

const UserList = props => 
(<ul>
    {props.users.map(u => (
        <li>{u.name} - {u.age} years old</li>
    ))})
</ul>)

Stateful component keeps track of the information itself, instead of just taking it via props and outputing it.