Is it possible to create a React component that will never be re-rendered, even if props or state change, or if it's being rendered in a list? The answers I've seen elsewhere use shouldComponentUpdate, React.memo, or useMemo, but all of these have a note in the docs:

shouldComponentUpdate:

This method only exists as a performance optimization. Do not rely on it to “prevent” a rendering, as this can lead to bugs.

React.memo:

This method only exists as a performance optimization. Do not rely on it to “prevent” a render, as this can lead to bugs.

useMemo:

You may rely on useMemo as a performance optimization, not as a semantic guarantee. In the future, React may choose to “forget” some previously memoized values and recalculate them on next render, e.g. to free memory for offscreen components. Write your code so that it still works without useMemo — and then add it to optimize performance.

Is there a recommended way of creating a component (either class or functional) that will never be re-rendered?

Usecase: I have a list of components that are each essentially a React wrapper around Quill (a rich text editor). Since they each manage their own state, I don't want any of the existing components to be re-rendered if the list is changed, or the contents will be reset/cleared. I'm currently using shouldComponentUpdate and always returning false, which seems to work, but the docs made me curious if there was a better way (and I wasn't able to find anyone else suggesting one).

CodePudding user response：

As realtime web application experience it's not recommended to state less component. But we can create react component with no re-render

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import React from 'react';
const App = () => {
  return (<h1>Only change when object change</h1>)
}
export default React.memo(App);

import React from 'react';
const App = () => {
  return (<h1>Only change when object change</h1>)
}
export default React.memo(App);

CodePudding user response：

Yes, it is possible to create a React component that will never be re-rendered, even if its props or state change, or if it is being rendered in a list. This can be achieved by using the 'React.memo' higher-order component, which wraps a functional component and only re-renders it if one of its dependencies has changed.

Here is an example of how to create a component that will never be re-rendered:

import React from 'react';

const MyComponent = (props) => {
  // Render component here
  return <div>{props.message}</div>;
}

export default React.memo(MyComponent);

The 'React.memo' higher-order component compares the previous and current props of the wrapped component using a shallow comparison. If the props have not changed, the wrapped component will not be re-rendered.

Keep in mind that using 'React.memo' can improve the performance of your application by preventing unnecessary re-renders, but it can also make your code harder to understand and maintain if used excessively. It is important to carefully consider the trade-offs of using 'React.memo' and to use it only when it is actually needed.