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>

so I'm building a clicker game to learn react, and something I don't understand why this code is behaving the way it does:

in the main app I have this function:

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

that console.count runs a single time... but I get 2 'old and new' pairs. as if setState is running twice in this function which only runs once?

the console.output is:

App.js:64 gain button: 1
App.js:76 1 "old"
App.js:77 1 "new"
App.js:76 2 "old"
App.js:77 2 "new"

so it looks like the function is running once. but the set state is being run twice?

the symptoms are that it counts up by 2. but also the initial state of amount is 0, not 1, as seen in the gamedata.json

    resourceData:
        [
            {   
            name:"grey",
            resouceMax:100,
            isUnlocked:true,
            changePerTick:0,
            counterTillStopped:100,
            amount:0
            },{etc},{},{}],
        clickerData:
        [
            {
            name:"grey",
            subjectsOfIncrease:["grey"],
            isUnlocked:true,
            value:1
           },{etc},{},{}]

i don't think the rest of the code I'm about to most is relevant to this behavior, but I don't know react yet, so I don't know what I'm missing: but this is how I'm generating the clicker button:

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

        />

        )
    })

and in the clicker.js functional component I'm just returning this:

        <div>
        {props.name}
        <button name={props.name} onClick={props.HandleClick}>
                {props.name} {props.value}
        </button>
        </div>

the function is bound to this in the constructor... I don't understand why this is running setState twice inside a function that's called once.

I've also tried:

        <div>
        {props.name}
        <button name={props.name} onClick={()=>props.HandleClick}> //anon function results in no output
                {props.name} {props.value}
        </button>
        </div>

Answer 1

This is an intended behavior of a setState(callback) method wrapped in a <React.Strict> component.

The callback is executed twice to make sure it doesn't mutate state directly.

as per: https://github.com/facebook/react/issues/12856#issuecomment-390206425

---

In the snippet, you create a new array, but the objects inside of it are still the same:

const newResources = lastResources.map(resource => {
  if(resource.name === name){
    resource.amount = Number(resource.amount) + 1 
  }  
  return resource;
}

You have to duplicate each object individually:

const newResources = lastResources.map(resource => {
  const newObject = Object.assign({}, resource)
  if(resource.name === name){
    newObject.amount = Number(newObject.amount) + 1 
  }  
  return newObject;
}

Answer 2

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.