useState re-renders the component(on a button click). I need to change the background of the component to red for 1 second before this happens

Question

I need to display the background as red only for a second once the user clicks on the button that updates the state. Once the state is updated the displayed values change. So before this happens I need to change the background to a particular color(green/red/blue) before the state changes but only for a second. I tried using setTimeOut() but might not be using it correctly

 const [rightOptionBgColor1, setRightOptionBgColor1] = useState('#95d4ed');

async function onPressOptionRight1()  {       
        setRightOptionBgColor1('green');
      
        
    };

   <TouchableWithoutFeedback onPress={onPressOptionRight1}>
                        <View style={[styles.twoOptions,  { backgroundColor: rightOptionBgColor1 }]}>
                        
                            <Text style={styles.textStyles} >{rightAns}</Text>
                           
                        </View>

Answer 1

-------Edited Updated Answer----------

I have created a working snack of what you want to achieve but before viewing it read the answer below. here's snack link

https://snack.expo.dev/@crystalarcus/usestate-with-timeout

You can easily achieve it with useEffect hook. useEffect can be used to do something after the specific useState changes.

useEffect takes 2 arguments, first the function be executed every time state change, second a array of variables ( useState ). Syntax is simple : useEffect( function , [array of varaibles])

useEffect( 
    ()=>{
       //function to be executed
    } ,  
    [var1, var2]   // array of variables
);

Everytime variables in array change, useEffect executes function passed into it.

Instead of TouchableWithoutFeedback, I suggest you use Pressable component.

NOTE : ALWAYS USE useEffect right above return statement of component and below other useState variables.

So This is how you use it:

export default function App() {

    // All the useStates here -------
    const [color, setColor] = useState('#eee');
    const [textColor, setTextColor] = useState('#000');
    const [isAnswered, setIsAnswered] = useState(false);

    const onPressed = () => {
      setColor(value); // set button color
      setIsAnswered(true); // setIsAnswered true so useEffect is triggered
    }

    useEffect(() => {     // <---- use it here 
      if (isAnswered) {
        setTimeout(() => { 
          alert('Answer was clicked'); // function which you want to execute
        }, 2000);  // Time after which you want to execute funtion
      }
    }, [isAnswered])

    return (   // <------ return statement of component
      <View>
        <Pressable onPress={onPressed}>
           // Components Inside button 
       </Pressable>
      </View>
   )
}

Explanation :

As you see, useState isAnswered is passed in useEffect at the end. This means the function passed to it will be triggered everytime isAnswered changes. setTimeout have been used to wait and function passed inside it will be executed after timeout.

Hope this helps !!