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

Questions
1

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?

2

This is a classic mistake about useState in React: useState – React

3

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

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

4

why the useEffect in the first place?

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

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

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
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.

1 Like
5

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.

6

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

7

My function code like this

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

8

Already solved.