React class component renders twice on Chrome only

Question

I created a project with create-react-app:

yarn create react-app example-react-ts --template typescript

Then created a simple component:

import * as React from 'react'

interface ExampleProps {message: string}

class Example extends React.Component<ExampleProps> {
    render() {
        console.log("render")
        return (<div><p>{this.props.message}</p></div>)
    }
}

export default Example

Firefox prints "render" once.

Chrome prints "render" twice.

If I replace it with a functional component:

import * as React from 'react'
interface ExampleProps {message: string}

export const Example = (props: ExampleProps) => {
    console.log("render")
    return (
        <div><p>{props.message}</p></div>
    );
}

export default Example

Both Firefox and Chrome print "render" once.

Why?

It only renders once here in my Chrome: https://codepen.io/Squeegy/pen/yLYEPJx?editors=0010 — Alex Wayne, May 11 '20 at 23:41

cahen · Accepted Answer · 2022-12-21T23:44:14.000

1

The problem is the Strict Mode used by default when you create the project with create-react-app:

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Removing it solved the problem.

More details here.

edited Dec 21 '22 at 23:44

answered May 12 '20 at 00:25

cahen

15,807
13
47
78

True, but how did you know that ? – Mohammed Ramadan Jul 24 '20 at 04:08
I didn't until I removed it. I still don't know why it renders twice though. – cahen Jul 24 '20 at 08:49
It only renders twice in development, not in production. It's supposed to point out some issues with your application – buzatto Aug 30 '21 at 01:27

React class component renders twice on Chrome only

1 Answers1