# How to use useState in React and three.js project?

**URL:** <https://discourse.threejs.org/t/how-to-use-usestate-in-react-and-three-js-project/59025>\
**Category:** Questions\
**Tags:** react\
**Created:** [December 8, 2023, 2:35pm UTC](https://discourse.threejs.org/t/how-to-use-usestate-in-react-and-three-js-project/59025 "2023-12-08T14:35:50Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![williamweb3](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/williamweb3/32/42771_2.png) [@williamweb3](https://discourse.threejs.org/u/williamweb3)\
**Post date:** [December 8, 2023, 2:35pm UTC](https://discourse.threejs.org/t/how-to-use-usestate-in-react-and-three-js-project/59025/1 "2023-12-08T14:35:50Z")

</div>

My Code is below:  
const App= () =\> {  
const [varToF, setVarToF] = useState(false);  
const updateState() =\>{  
setVarToF(!varToF);  
}  
const rotateBox = () =\> {  
…  
if(varToF){  
console.log(‘true’);  
}else{  
console.log(‘false’);  
}  
…  
useEffect(() =\> {  
rotateBox();  
}, );  
return (  
…  
)  
}

I got false all the time, when I use updateState() to update the value of varToF, But It’s not effect in three.js module, What should I do if I want using the change varToF on rotateBox() ?  
useState is not effect in three.js?

---

<div class="post-metadata">

**Author:** ![raaaahman](https://avatars.discourse-cdn.com/v4/letter/r/5fc32e/32.png) [@raaaahman](https://discourse.threejs.org/u/raaaahman)\
**Post date:** [December 8, 2023, 3:14pm UTC](https://discourse.threejs.org/t/how-to-use-usestate-in-react-and-three-js-project/59025/2 "2023-12-08T15:14:02Z")

</div>

This is a classic mistake about `useState` in React: [useState – React](https://react.dev/reference/react/useState#ive-updated-the-state-but-logging-gives-me-the-old-value)

---

<div class="post-metadata">

**Author:** ![Akroob](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/akroob/32/41267_2.png) [@Akroob](https://discourse.threejs.org/u/Akroob)\
**Post date:** [December 8, 2023, 4:15pm UTC](https://discourse.threejs.org/t/how-to-use-usestate-in-react-and-three-js-project/59025/3 "2023-12-08T16:15:22Z")

</div>

isnt it like this ?  
const updateState = () =\>

if that does work use something like  
const updateState = () =\> {  
setVarToF((prevVarToF) =\> !prevVarToF);  
}

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [December 8, 2023, 9:04pm UTC](https://discourse.threejs.org/t/how-to-use-usestate-in-react-and-three-js-project/59025/4 "2023-12-08T21:04:52Z")

</div>

why the useEffect in the first place?

but either way, the `, [])` is your issue

```jsx
const App= () => {
  const [varToF, setVarToF] = useState(false)
  useEffect(() => {
    if(varToF) console.log(‘true’)
    else console.log(‘false’)
  }, [varToF]) // <----- ✅
  return (
    ...

```

though it should probably be something like this

```jsx
function Box() {
  const [f, set] = useState(false)
  return (
    <mesh onClick={() => set(!f)} rotation={[0, f ? Math.PI / 2 : 0, 0]}>
      <boxGeometry />
      <meshStandardMaterial />
    </mesh>
  )
}

```

refer to the original react+three baby example that demonstrates state changes [Basic demo - CodeSandbox](https://codesandbox.io/s/basic-demo-rrppl0y8l4)  
in react, by definition, the view is the outcome of a function of state. if that’s not the case and you’re somehow sidestepping that it would be a mistake, or some kind of anti pattern.

---

<div class="post-metadata">

**Author:** ![williamweb3](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/williamweb3/32/42771_2.png) [@williamweb3](https://discourse.threejs.org/u/williamweb3)\
**Post date:** [December 9, 2023, 12:03am UTC](https://discourse.threejs.org/t/how-to-use-usestate-in-react-and-three-js-project/59025/5 "2023-12-09T00:03:32Z")

</div>

This is just for simplicity. In fact, my program is very complex. I need state variables to control the monitoring of mouse click events to handle different logic. However, my state variables change externally, but remain unchanged inside three.js, so I just can’t implement my logic.

---

<div class="post-metadata">

**Author:** ![williamweb3](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/williamweb3/32/42771_2.png) [@williamweb3](https://discourse.threejs.org/u/williamweb3)\
**Post date:** [December 9, 2023, 12:07am UTC](https://discourse.threejs.org/t/how-to-use-usestate-in-react-and-three-js-project/59025/6 "2023-12-09T00:07:41Z")

</div>

I need state variables to control the monitoring of mouse click events to handle different logic

---

<div class="post-metadata">

**Author:** ![williamweb3](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/williamweb3/32/42771_2.png) [@williamweb3](https://discourse.threejs.org/u/williamweb3)\
**Post date:** [December 9, 2023, 12:43am UTC](https://discourse.threejs.org/t/how-to-use-usestate-in-react-and-three-js-project/59025/7 "2023-12-09T00:43:31Z")

</div>

> [@williamweb3](#):
>
> const App= () =\> {  
> const [varToF, setVarToF] = useState(false);  
> const updateState() =\>{  
> setVarToF(!varToF);  
> }  
> const rotateBox = () =\> {  
> …  
> if(varToF){  
> console.log(‘true’);  
> }else{  
> console.log(‘false’);  
> }  
> …  
> useEffect(() =\> {  
> rotateBox();  
> }, );  
> return (  
> …  
> )  
> }

My function code like this

```javascript
const App= () => {
    const [varToF, setVarToF] = useState(false);
    const updateState() =>{
        setVarToF(!varToF);
    }
    const rotateBox = () => {
        …
        
        let mouse = new THREE.Vector2();
        let raycaster = new THREE.Raycaster();
        document.addEventListener( "mousedown", onDocumentMouseDown, false );
        function onDocumentMouseDown( event ) {
          mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
          mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
          raycaster.setFromCamera( mouse, camera );
            try{
              let intersects = raycaster.intersectObjects( chick_scene.children, true);
              
              if ( intersects.length > 0 ) {
                if(varToF){
                    runLeft()
                }else{
                    runRight()
                }
              }

            }catch(e){
              console.log(e)
            }
        }
        …
    }
    useEffect(() => {
        rotateBox();
    }, []);
    return (
    …
    )
}

```

I want updateState() to control runLeft or runRight

---

<div class="post-metadata">

**Author:** ![williamweb3](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/williamweb3/32/42771_2.png) [@williamweb3](https://discourse.threejs.org/u/williamweb3)\
**Post date:** [December 9, 2023, 7:02am UTC](https://discourse.threejs.org/t/how-to-use-usestate-in-react-and-three-js-project/59025/8 "2023-12-09T07:02:14Z")

</div>

Already solved.