javascript - In React why does a child component's render function get called twice? - Stack Overflow

admin管理员组

文章数量:1334162

I have the simplest of apps. There's a parent <App> ponent and a child <MyChildOne> ponent. Both are class-based.

Can anyone please explain why React calls the render function of child <MyChildOne> twice?

Here's my <App> code:

import React from "react";
import "./App.css";
import MyChildOne from "./MyChildOne.js";

class App extends React.Component {
  render() {
    return (
      <div>
        <MyChildOne />
      </div>
    );
  }
}
export default App;

And here's my <MyChildOne> code:

import React from "react";

class MyChildOne extends React.Component {
  counter = 0;

  render() {
    this.counter = this.counter + 1;

    console.log(
      "Code has called MyChildOne and this.counter has value: " + this.counter
    );

    return <h1>Hello, {this.counter}</h1>;
  }
}

export default MyChildOne;

The output in the browser is this:

Hello, 1

And here's what gets logged in the console:

Code has called MyChildOne and this.counter has value: 1

Code has called MyChildOne and this.counter has value: 2

So clearly React is calling the render function of <MyChildOne> twice – but I cannot understand why!!!!

This is no good to me because I want to pass as props an array of things from <App> to <MyChildOne> and I want <MyChildOne> to render, let's say, an <h1> for every 'thing' member of that array. I do not want the <h1>s to be rendered twice!

I have the simplest of apps. There's a parent <App> ponent and a child <MyChildOne> ponent. Both are class-based.

Can anyone please explain why React calls the render function of child <MyChildOne> twice?

Here's my <App> code:

import React from "react";
import "./App.css";
import MyChildOne from "./MyChildOne.js";

class App extends React.Component {
  render() {
    return (
      <div>
        <MyChildOne />
      </div>
    );
  }
}
export default App;

And here's my <MyChildOne> code:

import React from "react";

class MyChildOne extends React.Component {
  counter = 0;

  render() {
    this.counter = this.counter + 1;

    console.log(
      "Code has called MyChildOne and this.counter has value: " + this.counter
    );

    return <h1>Hello, {this.counter}</h1>;
  }
}

export default MyChildOne;

The output in the browser is this:

Hello, 1

And here's what gets logged in the console:

Code has called MyChildOne and this.counter has value: 1

Code has called MyChildOne and this.counter has value: 2

So clearly React is calling the render function of <MyChildOne> twice – but I cannot understand why!!!!

This is no good to me because I want to pass as props an array of things from <App> to <MyChildOne> and I want <MyChildOne> to render, let's say, an <h1> for every 'thing' member of that array. I do not want the <h1>s to be rendered twice!

• javascript
• reactjs
• ponents
• render

Share Improve this question Follow edited Apr 10, 2020 at 11:01 alienCred asked Apr 10, 2020 at 10:51 alienCredalienCred 5711 silver badge77 bronze badges 2

• Your code is fine, it called once, perhaps your rendering the mon parent. – Dennis Vash Commented Apr 10, 2020 at 11:06
• Thank you for your answer, Dennis. – alienCred Commented Apr 10, 2020 at 17:15

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

I'm not sure why but this is only happening in the strict mode. I create an example project with the same code you showed. Try removing the React.StrictMode tag in index.js file. You'll see that MyChildOne ponent is only rendering once.

Also, if you're gonna set a property inside the class and use it inside the render method, you should use the state. Like this,

 state = {
     counter: 0
  }

. And Change the state like this,

this.setState({counter: this.state.counter + 1});

It'll re-render you ponent properly. But never change the state inside of render method; it'll break your code.

And, just a suggestion, if you don't want to use the state and lifecycle methods, don't use class ponents, use functional ponents instead. It'll look cleaner and easier to understand.

You shouldn't worry too much about the render function being called multiple times. If you're creating logic that depends on the render function being called multiple times, you're most likely doing something wrong. My best would be that you're doing some other logic that causes the render function to being called multiple times.

You should note that if your parent ponent re-renders, so does your child ponent. I created a minimal example of the code you provided, which makes it clear that your issue is somewhere else. https://codesandbox.io/s/react-example-6ud9d

1. Your function is calling child render function a single times only.
2. This is not the approach to create state in class ponent instead you can use.

constructor(props) {
    super(props);
    this.state = {
        count: 0,
    };
}

3. The updation of state should be done using

   this.setState:

   {()=>{this.setState({ count:this.state.count+1 })}}

4. The ponent that is rendering twice may be because of the event which you might be triggering like I was with my mouse-over event.

本文标签： javascriptIn React why does a child component39s render function get called twiceStack Overflow