What is the difference between setState() and replaceState() methods?

When you use setState() the current and previous states are merged. replaceState() throws out the current state, and replaces it with only what you provide. Usually setState() is used unless you really need to remove all previous keys for some reason. You can also set state to false/null in setState() instead of using replaceState().

How to listen to state changes?

The componentDidUpdate lifecycle method will be called when state changes. You can compare provided state and props values with current state and props to determine if something meaningful changed.

componentDidUpdate(object prevProps, object prevState)

Note: The previous releases of ReactJS also uses componentWillUpdate(object nextProps, object nextState) for state changes. It has been deprecated in latest releases.

What is the recommended approach of removing an array element in React state?

The better approach is to use Array.prototype.filter() method.

For example, let's create a removeItem() method for updating the state.

removeItem(index) {
  this.setState({
    data: this.state.data.filter((item, i) => i !== index)
  })
}

Is it possible to use React without rendering HTML?

It is possible with latest version (>=16.2). Below are the possible options:

render() {
  return false
}

render() {
  return null
}

render() {
  return []
}

render() {
  return <React.Fragment></React.Fragment>
}

render() {
  return <></>
}

Returning undefined won't work.

How to pretty print JSON with React?

We can use <pre> tag so that the formatting of the JSON.stringify() is retained:

const data = { name: 'John', age: 42 }

class User extends React.Component {
  render() {
    return (
      <pre>
        {JSON.stringify(data, null, 2)}
      </pre>
    )
  }
}

React.render(<User />, document.getElementById('container'))

Why you can't update props in React?

The React philosophy is that props should be immutable and top-down. This means that a parent can send any prop values to a child, but the child can't modify received props.

How to focus an input element on page load?

You can do it by creating ref for input element and using it in componentDidMount():

class App extends React.Component{
  componentDidMount() {
    this.nameInput.focus()
  }

  render() {
    return (
      <div>
        <input
          defaultValue={'Won\'t focus'}
        />
        <input
          ref={(input) => this.nameInput = input}
          defaultValue={'Will focus'}
        />
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'))

What are the possible ways of updating objects in state?

1. Calling setState() with an object to merge with state:

   • Using Object.assign() to create a copy of the object:

     const user = Object.assign({}, this.state.user, { age: 42 })
     this.setState({ user })
     

   • Using spread operator:

     const user = { ...this.state.user, age: 42 }
     this.setState({ user })
     

2. Calling setState() with a function:

   this.setState(prevState => ({
     user: {
       ...prevState.user,
       age: 42
     }
   }))
   

How can we find the version of React at runtime in the browser?

You can use React.version to get the version.

const REACT_VERSION = React.version

ReactDOM.render(
  <div>{`React version: ${REACT_VERSION}`}</div>,
  document.getElementById('app')
)

What are the approaches to include polyfills in your create-react-app?

There are approaches to include polyfills in create-react-app,

1. Manual import from core-js:

   Create a file called (something like) polyfills.js and import it into root index.js file. Run npm install core-js or yarn add core-js and import your specific required features.

   import 'core-js/fn/array/find'
   import 'core-js/fn/array/includes'
   import 'core-js/fn/number/is-nan'
   

2. Using Polyfill service:

   Use the polyfill.io CDN to retrieve custom, browser-specific polyfills by adding this line to index.html:

   <script src='https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Array.prototype.includes'></script>
   

   In the above script we had to explicitly request the Array.prototype.includes feature as it is not included in the default feature set.