How you implement Server Side Rendering or SSR?

React is already equipped to handle rendering on Node servers. A special version of the DOM renderer is available, which follows the same pattern as on the client side.

import ReactDOMServer from 'react-dom/server'
import App from './App'

ReactDOMServer.renderToString(<App />)

This method will output the regular HTML as a string, which can be then placed inside a page body as part of the server response. On the client side, React detects the pre-rendered content and seamlessly picks up where it left off.

How to enable production mode in React?

You should use Webpack's DefinePlugin method to set NODE_ENV to production, by which it strip out things like propType validation and extra warnings. Apart from this, if you minify the code, for example, Uglify's dead-code elimination to strip out development only code and comments, it will drastically reduce the size of your bundle.

What is CRA and its benefits?

The create-react-app CLI tool allows you to quickly create & run React applications with no configuration step.

Let's create Todo App using CRA:

# Installation
$ npm install -g create-react-app

# Create new project
$ create-react-app todo-app
$ cd todo-app

# Build, test and run
$ npm run build
$ npm run test
$ npm start

It includes everything we need to build a React app:

1. React, JSX, ES6, and Flow syntax support.

2. Language extras beyond ES6 like the object spread operator.

3. Autoprefixed CSS, so you don’t need -webkit- or other prefixes.

4. A fast interactive unit test runner with built-in support for coverage reporting.

5. A live development server that warns about common mistakes.

6. A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps.

What is the lifecycle methods order in mounting?

The lifecycle methods are called in the following order when an instance of a component is being created and inserted into the DOM.

1. constructor()

2. static getDerivedStateFromProps()

3. render()

4. componentDidMount()

What are the lifecycle methods going to be deprecated in React v16?

The following lifecycle methods going to be unsafe coding practices and will be more problematic with async rendering.

1. componentWillMount()
2. componentWillReceiveProps()
3. componentWillUpdate()

Starting with React v16.3 these methods are aliased with UNSAFE_ prefix, and the unprefixed version will be removed in React v17.

What is the purpose of getDerivedStateFromProps() lifecycle method?

The new static getDerivedStateFromProps() lifecycle method is invoked after a component is instantiated as well as before it is re-rendered. It can return an object to update state, or null to indicate that the new props do not require any state updates.

class MyComponent extends React.Component {
  static getDerivedStateFromProps(props, state) {
    // ...
  }
}

This lifecycle method along with componentDidUpdate() covers all the use cases of componentWillReceiveProps().

What is the purpose of getSnapshotBeforeUpdate() lifecycle method?

The new getSnapshotBeforeUpdate() lifecycle method is called right before DOM updates. The return value from this method will be passed as the third parameter to componentDidUpdate().

class MyComponent extends React.Component {
  getSnapshotBeforeUpdate(prevProps, prevState) {
    // ...
  }
}

This lifecycle method along with componentDidUpdate() covers all the use cases of componentWillUpdate().

Do Hooks replace render props and higher order components?

Both render props and higher-order components render only a single child but in most of the cases Hooks are a simpler way to serve this by reducing nesting in your tree.

What is the recommended way for naming components?

It is recommended to name the component by reference instead of using displayName.

Using displayName for naming component:

export default React.createClass({
  displayName: 'TodoApp',
  // ...
})

The recommended approach:

export default class TodoApp extends React.Component {
  // ...
}

What is the recommended ordering of methods in component class?

Recommended ordering of methods from mounting to render stage:

1. static methods

2. constructor()

3. getChildContext()

4. componentWillMount()

5. componentDidMount()

6. componentWillReceiveProps()

7. shouldComponentUpdate()

8. componentWillUpdate()

9. componentDidUpdate()

10. componentWillUnmount()

11. click handlers or event handlers like onClickSubmit() or onChangeDescription()

12. getter methods for render like getSelectReason() or getFooterContent()

13. optional render methods like renderNavigation() or renderProfilePicture()

14. render()