0

I am trying to share a counter variable among a list of child components. The way I am doing this is by simply maintaining the counter on parent and passing callbacks to the children. Unfortunately weird behaviour is happening where the counter is incrementing 2 times. Any help is appreciated.

import React from "react";
class BenefitRow extends React.Component {
    render() {
      this.props.incrementer();
      console.log(this.props.count());
      return (
        <div>HEllo</div>
      );
    }
  }
class BenefitSection extends React.Component {
  benefitCounter = 0;
  incrementer = () => {
    console.log("Incrementing!" + this.benefitCounter);
    ++this.benefitCounter;
  };
  getBenefitCounter = () => {
    return this.benefitCounter;
  };
  render() {
    return (
      <div>
        <BenefitRow
          count={this.getBenefitCounter}
          incrementer={this.incrementer}
        ></BenefitRow>
        <BenefitRow
          count={this.getBenefitCounter}
          incrementer={this.incrementer}
        ></BenefitRow>
        <BenefitRow
          count={this.getBenefitCounter}
          incrementer={this.incrementer}
        ></BenefitRow>
      </div>
    );
  }
}
export default BenefitSection

Take a look at console output. There is a interval of two between the count values. enter image description here

Anwesh Mohapatra
  • 194
  • 15
  • Looks like you are rendering your app into a `React.Strictmode` and the `this.props.incrementer();` in the `render` function is a side-effect that shouldn't be there. [SandboxDemo](https://codesandbox.io/s/nifty-dirac-5wb8r?file=/src/index.js) try commenting/uncommenting the `Strictmode` in `index.js` and see the difference. – Drew Reese Nov 10 '20 at 21:56
  • @DrewReese Is that really the same? Wouldn't you see a second console log for `this.props.count()` as well? I was originally thinking it was a double render, but each console log only prints once according to the image. – Brian Thompson Nov 10 '20 at 21:58
  • 1
    FYI, you should be using state for this anyway.. Its a textbook usecase for a stateful variable. – Brian Thompson Nov 10 '20 at 22:00
  • @DrewReese The sandbox is very helpful, you've cured my doubts that strict mode is the cause :) I'm still curious why you don't see the console log twice even though the increment function is called. Do you happen to know? In the functional component example in your linked dup the console log **is** printed twice. – Brian Thompson Nov 10 '20 at 22:04
  • @DrewReese I did not understand why state variables are apt here but my method would lead to some kind of a side effect. Any resources you can point to that can help me understand? – Anwesh Mohapatra Nov 10 '20 at 22:04
  • 1
    I agree that on the surface it appears that one would expect double logging, and to that I don't have a quick answer, without digging deeper, as to why, but clearly the `why-is-react-incrementing-counter-two-times` is invoked twice per component when `App` is wrapped in `StrictMode`, and once without. I find the official react docs sufficient, what sort of resource, and for what, are you looking for? – Drew Reese Nov 10 '20 at 22:09
  • just to have a better understanding that's all. Thanks for your help though – Anwesh Mohapatra Nov 10 '20 at 22:14

0 Answers0