Open collections

What is ReactDOMServer?

2020-06-23T21:45:59.419Z

The ReactDOMServer object enables you to render components to static markup (typically used on node server). This object is mainly used for server-side rendering (SSR). The following methods can be used in both the server and browser environments:

renderToString()
renderToStaticMarkup()

For example, you generally run a Node-based web server like Express, Hapi, or Koa, and you call renderToString to render your root component to a string, which you then send as response.

What is the purpose of render method of react-dom?

2020-06-23T21:44:26.784Z

This method is used to render a React element into the DOM in the supplied container and return a reference to the component. If the React element was previously rendered into container, it will perform an update on it and only mutate the DOM as necessary to reflect the latest changes.

If the optional callback is provided, it will be executed after the component is rendered or updated.

What is the use of react-dom package?

2020-06-23T21:42:09.813Z

The react-dom package provides DOM-specific methods that can be used at the top level of your app. Most of the components are not required to use this module. Some of the methods of this package are:

render()
hydrate()
unmountComponentAtNode()
findDOMNode()
createPortal()

What are the recommended ways for static type checking?

2020-06-23T21:41:04.783Z

Normally we use PropTypes library (React.PropTypes moved to a prop-types package since React v15.5) for type checking in the React applications. For large code bases, it is recommended to use static type checkers such as Flow or TypeScript, that perform type checking at compile time and provide auto-completion features.

How error boundaries handled in React v15?

2020-06-23T21:39:29.522Z

React v15 provided very basic support for error boundaries using unstable_handleError method. It has been renamed to componentDidCatch in React v16.

What are error boundaries in React v16?

2020-06-23T21:38:02.830Z

Error boundaries are components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.

A class component becomes an error boundary if it defines a new lifecycle method called componentDidCatch(error, info) or static getDerivedStateFromError() :

After that use it as a regular component:

What are the advantages of React?

2020-06-23T21:22:07.280Z

Increases the application's performance with Virtual DOM.

JSX makes code easy to read and write.

It renders both on client and server side (SSR).

Easy to integrate with frameworks (Angular, Backbone) since it is only a view library.

Easy to write unit and integration tests with tools such as Jest.

What are the limitations of React?

2020-06-23T21:17:29.731Z

React is just a view library, not a full framework.

There is a learning curve for beginners who are new to web development.

Integrating React into a traditional MVC framework requires some additional configuration.

The code complexity increases with inline templating and JSX.

Too many smaller components leading to over engineering or boilerplate.

How to apply validation on props in React?

2020-06-23T21:10:42.237Z

When the application is running in development mode, React will automatically check all props that we set on components to make sure they have correct type. If the type is incorrect, React will generate warning messages in the console. It's disabled in production mode due to performance impact. The mandatory props are defined with isRequired.

The set of predefined prop types:

PropTypes.number
PropTypes.string
PropTypes.array
PropTypes.object
PropTypes.func
PropTypes.node
PropTypes.element
PropTypes.bool
PropTypes.symbol
PropTypes.any

We can define propTypes for User component as below:

Note: In React v15.5 PropTypes were moved from React.PropTypes to prop-types library.

What are stateful components?

2020-06-23T21:09:11.283Z

If the behaviour of a component is dependent on the state of the component then it can be termed as stateful component. These stateful components are always class components and have a state that gets initialized in the constructor.

React 16.8 Update: Hooks let you use state and other React features without writing classes.

The Equivalent Functional Component