javascript - reactjs: setState being called twice in a function called once? why?

Question

EDIT: since the code snip does not reproduce the bug - here is a link to the github repo: (code is far FAR from complete)

https://github.com/altruios/clicker-game

I have run it on two computers now - both with the same behavior the code snip doesn't show.

//interestingly enough, this works just fine, where the same code I run locally has the doubling.
//when I comment out ALL other code except for this code I STILL get the error locally
//at this point the only difference is import export of components... here they are in one file.
//below is original code from file (
/* 
FILE::::Clicker.js
 
import React from 'react';

function Clicker(props)
{
return(
<div>
{props.name}
<button 
name={props.name} 
onClick={props.HandleClick} 
data-target={props.subjectsOfIncrease}> 
{props.name} {props.value}

</button>
</div>


)
}

export default Clicker;

FILE:: Resouce.js

import React from 'react';
function Resource(props)
{
return(
<div>
{props.name} and  {props.amount || 0}

</div>


)
}

export default Resource;



*/
//besides the import/export and seprate files - code is the same. it works in here, does not work locally on my machine.

const gameData = {
  clickerData: [{
    name: "grey",
    subjectsOfIncrease: ["grey"],
    isUnlocked: true,
    value: 1
  }],
  resourceData: [{
    name: "grey",
    resouceMax: 100,
    isUnlocked: true,
    changePerTick: 0,
    counterTillStopped: 100,
    amount: 0
  }]
}
class App extends React.Component {
    constructor() {
      super();
      this.state = {
        resources: gameData.resourceData,
        clickers: gameData.clickerData
      };
      this.gainResource = this.gainResource.bind(this);
    }
    gainResource(event) {
      console.count("gain button");
      const name = event.target.name;
      this.setState((prevState) => {
        const newResources = prevState.resources.map(resource => {
          if (resource.name === name) {
            resource.amount = Number(resource.amount) + 1 //Number(prevState.clickers.find(x=>x.name===name).value)
          }
          return resource;
        });
        console.log(prevState.resources.find(item => item.name === name).amount, "old");
        console.log(newResources.find(item => item.name === name).amount, "new");
        return {
          resources: newResources
        }
      });
    }
    render() {
      const resources = this.state.resources.map(resourceData => {
          return (
            <Resource 
              name = {resourceData.name}
              resouceMax = {resourceData.resourceMax}
              isUnlocked = {resourceData.isUnlocked}
              changePerTick = {resourceData.changePerTick}
              counterTillStopped = {resourceData.countTillStopped}
              amount = {resourceData.amount}
              key = {resourceData.name}
            />
          )
      })

      const clickers = this.state.clickers.map(clickerData => {
          return ( 
            <Clicker 
              name = {clickerData.name}
              HandleClick = {this.gainResource}
              value = {clickerData.amount}
              key = {clickerData.name}
            />
          )
    })

    return (
          <div className = "App" > 
            {resources} 
           {clickers} 
          </div>
   )
 }
}
function Resource(props) {
      return  <div >  {props.name} and {props.amount || 0} </div>
}

function Clicker(props) {
      return ( 
        <div > {props.name} 
          <button name = {props.name}  onClick = {props.HandleClick}>
            {props.name} {props.value}
          </button> 
        </div>
     )
}
const root = document.getElementById('root');
ReactDOM.render(  <App / >,root );

<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>
<div id="root"></div>

Answer 1

BEST ANSWER:

I was using create-react-app. and my App Component was wrapped in Strict mode... which fires setState twice... which perfectly explains why this was not reproducible on the code snip, and why the function was being called once, yet setState was called twice.

removing strict mode fixed the issue completely.