useEffect Hook
Import
import { useEffect } from 'react'
Video Lecture
Section | Video Links | |
---|---|---|
useEffect Hook | ![]() |
![]() |
Description
In the last example, there was a very subtle error which you might not have picked up if I didn't bring it to your attention.
When I used console.log(ref)
in the last example, the Mesh hadn't actually finished being created in Three.js scene yet. So, if we needed to do any logic on that data within our script, then we would have needed to make sure that it actually existed first, otherwise ref.current
would have been still undefined
. This is because we tried to access ref
and more specifically, it's current
property, before it had been set when the JSX was converted into a Three.js object.
A way to improve on my last example would be to use the React useEffect hook.
./src/Box.jsx
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
The useEffect
hook executes after the function returns the generated component instance within in it, which means the any ref
will be assigned before the useEffect
hook gets called.
Useful Links
useEffect | reactjs.org | w3schools.com | codesandbox.io |
useLayoutEffect | reactjs.org |
Working Example
GitHub Branch
git clone https://github.com/Sean-Bradley/React-Three-Fiber-Boilerplate.git
cd React-Three-Fiber-Boilerplate
git checkout useEffect
npm install
npm start