our component is rendering.

Here’s an example. This ` CountLabel ` component displays the ` count ` prop
passed to it:

    
    
    export default function CountLabel({ count }) {  
    
    
      return <h1>{count}</h1>  
    
    
    }

Say you want to show whether the counter has _increased or decreased_ since
the last change. The ` count ` prop doesn’t tell you this — you need to keep
track of its previous value. Add the ` prevCount ` state variable to track it.
Add another state variable called ` trend ` to hold whether the count has
increased or decreased. Compare ` prevCount ` with ` count ` , and if they’re
not equal, update both ` prevCount ` and ` trend ` . Now you can show both the
current count prop and _how it has changed since the last render_ .

App.js  CountLabel.js

CountLabel.js

Reset  [ Fork
](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-
react-app "Open in CodeSandbox")

    
    
    import { useState } from 'react';
    
    export default function CountLabel({ count }) {
      const [prevCount, setPrevCount] = useState(count);
      const [trend, setTrend] = useState(null);
      if (prevCount !== count) {
        setPrevCount(count);
        setTrend(count > prevCount ? 'increasing' : 'decreasing');
      }
      return (
        <>
          <h1>{count}</h1>
          {trend && <p>The count is {trend}</p>}
        </>
      );
    }
    
    

Show more

Note that if you call a ` set ` function while rendering, it must be inside a
condition like ` prevCount !== count ` , and there must be a call like `
setPrevCount(count) ` inside of the condition. Otherwise, your component would
re-render in a loop until it crashes. Also, you can only update the state of
the _currently rendering_ component like this. Calling the ` set ` function of
_another_ component during rendering is an error. Finally, your ` set ` call
should still  update state without mutation  — this doesn’t mean you can break
other rules of [ pure functions. ](/learn/keeping-components-pure)

This pattern can be hard to understand and is usually best avoided. However,
it’s better than updating state in an effect. When you call the ` set `
function during render, React will re-render that component immediately after
your component exits with a ` return ` statement, and before rendering the
children. This way, children don’t need to render twice. The rest of your
component function will still execute (and the result will be thrown away). If
your condition is below all the Hook calls, you may add an early ` return; `
to restart rendering earlier.

* * *

##  Troubleshooting

###  I’ve updated the state, but logging gives me the old value

Calling the ` set ` function **does not change state in the running code** :

    
    
    function handleClick() {  
    
    
      console.log(count);  // 0  
    
    
      
    
    
      setCount(count + 1); // Request a re-render with 1  
    
    
      console.log(count);  // Still 0!  
    
    
      
    
    
      setTimeout(() => {  
    
    
        console.log(count); // Also 0!  
    
    
      }, 5000);  
    
    
    }

This is because [ states behaves like a snapshot. ](/learn/state-as-a-
snapshot) Updating state requests another render with the new state value, but
does not affect the ` count ` JavaScript variable in your already-running
event handler.

If you need to use the next state, you can save it in a variable before
passing it to the ` set ` function:

    
    
    const nextCount = count + 1;  
    
    
    setCount(nextCount);  
    
    
      
    
    
    console.log(count);     // 0  
    
    
    console.log(nextCount); // 1

* * *

###  I’ve updated the state, but the screen doesn’t update

React will **ignore your update if the next state is equal to the previous
state,** as determined by an [ ` Object.is `
](https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. This
usually h