React Component API

In this section, we will discuss the React Component API. We will cover the following 7 methods:

Set State: setState
Replace State: replaceState
Set Props: setProps
Replace Props: replaceProps
Force Update: forceUpdate
Find DOM Node: findDOMNode
Check Component Mount Status: isMounted

Set State: setState

setState(object nextState[, function callback])

Parameter Explanation

nextState, the new state to be set, which will be merged with the current state.
callback, an optional parameter, a callback function. This function will be called after setState is successfully set and the component is re-rendered.

Merges nextState with the current state and re-renders the component. setState is the primary method to trigger UI updates from event handlers and callback functions in React.

About setState

You cannot modify the state directly within the component using this.state, as this state will be replaced after calling setState().

setState() does not immediately alter this.state, but creates a pending state transition. setState() is not necessarily synchronous; React may batch state updates and DOM renders for performance reasons.

setState() will always trigger a re-render of the component unless conditional rendering logic is implemented in shouldComponentUpdate().

Example

React Example

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { clickCount: 0 };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(function(state) {
      return { clickCount: state.clickCount + 1 };
    });
  }
  render() {
    return (&lt;h2 onClick={this.handleClick}>Click me! Click count: {this.state.clickCount}</h2>);
  }
}
ReactDOM.render(
  <Counter />,
  document.getElementById('example')
);

In this example, clicking on the h2 tag increments the click counter by 1.

Replace State: replaceState

replaceState(object nextState[, function callback])

nextState, the new state to be set, which will replace the current state.
callback, an optional parameter, a callback function. This function will be called after replaceState is successfully set and the component is re-rendered.

The replaceState() method is similar to setState(), but it only retains the state in nextState, and any state in the original state that is not in nextState will be deleted.

Set Props: setProps

setProps(object nextProps[, function callback])

nextProps, the new properties to be set, which will be merged with the current props.
callback, an optional parameter, a callback function. This function will be called after setProps is successfully set and the component is re-rendered.

Sets the component properties and re-renders the component.

props act as the data flow of the component, always passing down from parent components to all child components. When integrating with an external JavaScript application, we might need to pass data to the component or notify React.render() that the component needs to be re-rendered, which can be done using setProps().

To update the component, you can call React.render() again on the node, or change the component properties using the setProps() method to trigger a re-render.

Replace Props: replaceProps

replaceProps(object nextProps[, function callback])

nextProps, the new properties to be set, which will replace the current props.
callback, optional parameter, a callback function. This function will be called after replaceProps is successfully set and the component has re-rendered.

The replaceProps() method is similar to setProps, but it will remove the existing props.

Force Update: forceUpdate

forceUpdate([function callback])

Parameter Description

callback, optional parameter, a callback function. This function will be called after the component's render() method is invoked.

The forceUpdate() method will cause the component to invoke its own render() method to re-render the component, and the child components will also invoke their own render(). However, when the component re-renders, it will still read this.props and this.state. If the state has not changed, React will only update the DOM.

The forceUpdate() method is suitable for redrawing the component outside of this.props and this.state (e.g., after modifying this.state), by notifying React that it needs to call render().

In general, you should avoid using forceUpdate() and only read state from this.props and this.state, allowing React to trigger render() calls.

Get DOM Node: findDOMNode

DOMElement findDOMNode()

Return value: DOM element DOMElement

If the component has been mounted to the DOM, this method returns the corresponding native browser DOM element. When render returns null or false, this.findDOMNode() will also return null. This method is useful when reading values from the DOM, such as getting the value of a form field or performing some DOM operations.

Check Component Mount Status: isMounted

bool isMounted()

Return value: true or false, indicating whether the component has been mounted to the DOM

The isMounted() method is used to determine if the component has been mounted to the DOM. This method can be used to ensure that setState() and forceUpdate() are called correctly in asynchronous scenarios.

Reference: http://itbilu.com/javascript/react/EkACBdqKe.html

❮ React Install React Refs ❯