title: React Hook useState value being reset to initial value
body: <p>The state of a value set using React useState hook gets set to the proper value and then reset to null.  Critical code below.  The click event that sets the startDate to the current date and time is 3 components down from where startDate is initialized.  When setStartDate did not work I created an arrow function, updateStartDate.  Both had the same problem where the startDate was changed after the click event (witnessed per the console.log in the top component), but was null just before the next click event (per the console.log in the click event). This is not an async problem as I see the change made before subsequent click.</p>
  <p>If this is something that just does not work please explain.  I could probably fix with useReducer but prefer to keep the  useState if there is something I can do to correct this... If not correctable then I would like to at least understand why it does not work so that I can avoid this problem in the future.</p>
  <pre><code>export const DisplayTicTacToeContainer = (props) =&gt; {
   const [startDate, setStartDate]= useState();
   const updateStartDate = (newDate) =&gt; {
     setStartDate(newDate);
   }
   useEffect (() =&gt; {
     setStartDate(null);
   }, []);
  
   useEffect(() =&gt; {
      console.log( &quot;displayTicTacToeContainer useEffect for change of startDate = &quot;, startDate)
    }, [startDate]);
  
   return (
        &lt;DisplayTicTacToeMatch  arrayOfMatchingItems ={arrayOfMatchingItems}
          startDate={startDate} 
          setStartDate={setStartDate}
          updateStartDate={updateStartDate}          
        /&gt;);
  }
  
  //-----------------------------------------------
  export const DisplayTicTacToeMatch = (props)  =&gt; {
   const   { startDate,
             setStartDate,
             updateStartDate,
             } = props;
  
   useEffect(() =&gt; {
    // Performs some prep and working fine.
   }, []);
  
   return (
      &lt;TicTacToe
        startDate={startDate} 
        setStartDate={setStartDate}
        updateStartDate={updateStartDate}
      /&gt;
    );
  }
  //-----------------------------------------------
  const TicTacToeContainer = (props) =&gt; {
   const { startDate,
           setStartDate,
           updateStartDate,
          } = props;
  
   const [board, setBoard] = useState(&lt;Board 
       updateStartDate={updateStartDate}
       startDate={startDate} 
       setStartDate={setStartDate}/&gt;);
  
   return (
          &lt;Board/&gt;
      )
  }
  export default TicTacToeContainer;
  
  </code></pre>
  <p>I renamed the component to BoardComponent and the state variable to boardLayout.  I included the full return portion of the BoardComponent below.</p>
  <p>As I am still experiencing the problem I would agree with you that, &quot;DisplayTicTacToeContainer is being mounted twice&quot;.   Any thoughts on how I can avoid this from happening?</p>
  <p>Other than this inability to setStartDate, everything is working fine.</p>
  <pre><code>//-----------------------------------------------
  const Board = (props) =&gt; {
   const { updateStartDate,
           startDate,
           setStartDate,
      } = props;
  
      return (
          &lt;&gt;
          &lt;Grid container maxwidth=&quot;lg&quot; alignItems=&quot;center&quot; spacing={1}&gt;
              &lt;Grid item xs={9}&gt;
                  &lt;Grid container alignItems=&quot;center&quot;&gt;
                      &lt;Grid item xs={9}&gt;
                          &lt;Typography variant = &quot;body1&quot;&gt;                      
                          First select a square.  Once the &quot;Inquiry&quot; word or phrase appears below, find 
                          the correct response in the column on the right and select that buttton.  A correct
                          response will fill the square previously selected with an &quot;O&quot; or &quot;X&quot;.
                          &lt;/Typography&gt;
                          &lt;div style={{ width: '100%' }}&gt;
                      &lt;Box
                          display=&quot;flex&quot;
                          flexWrap=&quot;wrap&quot;
                          p={1}
                          m={1}
                          bgcolor=&quot;background.paper&quot;
                          css={{ maxWidth: 900 }}
                      &gt;
                      &lt;Box p={1} bgcolor=&quot;grey.300&quot;&gt;
                          Inquiry : {inquiry}
                      &lt;/Box&gt;
                      &lt;/Box&gt;
                      &lt;Box
                          display=&quot;flex&quot;
                          flexWrap=&quot;wrap&quot;
                          p={1}
                          m={1}
                          bgcolor=&quot;background.paper&quot;
                          css={{ maxWidth: 900 }}
                      &gt;
                      &lt;Box p={1} bgcolor=&quot;grey.300&quot;&gt;
                          Next move by : {currentPlayer}
                      &lt;/Box&gt;
  
                      &lt;Box p={1} bgcolor=&quot;grey.300&quot;&gt;
                          {showStatus}
                      &lt;/Box&gt;
                      &lt;/Box&gt;
                      &lt;/div&gt;
                      &lt;/Grid&gt;
  
                  &lt;/Grid&gt;
                          &lt;MyAux&gt;
                              {boardLayout.map((row, rowId) =&gt; { 
              const columns = row.map((column, columnId) =&gt; (
      
                  &lt;Grid key={columnId} item&gt;
                      &lt;ButtonBase &gt; 
                          &lt;Paper
                              onClick={(e) =&gt; {
                                  clickSquareHandler(e);
                                  }}
                              elevation={4}
                              data-coord={rowId + ':' + columnId}
                              id={&quot;Square&quot; + rowId.toString() +  columnId.toString()}
                              className={classes.Paper}&gt;
                              &lt;Icon
                                  className={classes.Icon}
                                  style={{fontSize: 78}}&gt;
                              &lt;/Icon&gt;
                          &lt;/Paper&gt;
                      &lt;/ButtonBase&gt;
                  &lt;/Grid&gt;
                  ));
                  return (
                  &lt;Grid
                      key={rowId}
                      className={classes.Grid}
                      container
                      spacing={2}&gt;
                      {columns}
  
                  &lt;/Grid&gt;)
             })}
                          &lt;/MyAux&gt;
                          &lt;/Grid&gt;
  
          &lt;Grid item xs={3} &gt;
          &lt;Paper className={classes.paper}&gt;
          &lt;Typography variant = &quot;body1&quot;&gt;    
              Response Options
          &lt;/Typography&gt;
              &lt;ButtonGroup
              orientation=&quot;vertical&quot;
              color=&quot;secondary&quot;
              aria-label=&quot;vertical outlined secondary button group&quot;
          &gt;
              {responseChoices.map((choice) =&gt; (
                                
                  &lt;Controls.Button
                      key ={choice.value}  
                      text={choice.value}
                      variant=&quot;contained&quot;
                      color = &quot;secondary&quot;
                      onClick={() =&gt; {
                      chooseChecker(choice);
                      }}
                      className={
                      response &amp;&amp; response.value === choice.value ? &quot;selected&quot; : &quot;&quot;
                      }
                      disabled={!!selected[choice.value]}
                      fullWidth = &quot;true&quot;
                      size = &quot;small&quot;
                      /&gt;
                  ))}
              &lt;/ButtonGroup&gt;
              &lt;/Paper&gt;
              &lt;/Grid&gt;
              &lt;/Grid&gt;
                  &lt;/&gt;
      )
  }
  
  BoardContainer.propTypes = {
      won: PropTypes.func,
      size: PropTypes.number
  };
  
  export default BoardContainer;
  
  </code></pre>