How to create a React component that will never be re-rendered

Question

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).

Answer 1

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);