I have a piano key component that can create “visuals” which are divs that float up from the keys. I have a visual_reference state included in the component’s return that also sets its ref so that I can animate it. I have this animate function inside of a useEffect that only runs after the div with the ref is defined, however the reference is always undefined.
I am pretty unexperienced with state and specifically dont understand useRef. I thought it was the same as useState except it doesnt rerender on change, and uses current value so things can access the new state.
PianoKey.js
let curr_playback_anim = useRef([null, true])
let [playback_visuals, set_playback_visuals] = useState([])
let [pb_counter, set_pb_counter] = useState(0)
let [curr_pb_anim, set_curr_pb_anim] = useState([null, true])
let playback_visual_refs = useRef({})
useEffect(() => {
if (playback_visuals[pb_counter] && curr_pb_anim[1]) {
playback_visual_refs.current[pb_counter] = playback_visuals[pb_counter].ref
// ref should be readable here
set_curr_pb_anim(prev_state => {
let l = [...prev_state]
l[0] = attribute_animation(playback_visual_refs.current[pb_counter], 'height', '100vh', '-300000px', 1000000)
l[1] = false
return l
})
}
}, [playback_visuals])
useEffect(() => {
if (pb_visual_mode === 'expand_down') {
audio.play()
set_playback_visuals(prev_state => {
set_curr_pb_anim(in_prev_state => {
let l = [...in_prev_state]
l[1] = true
return l
})
// ref should be set here
return ({...prev_state,
[pb_counter]: (
<div key={`${pb_counter}`} ref={ref => playback_visual_refs.current[pb_counter] = ref} className='visualizer-instance'></div>
)})
})
}
return (
<div>
{Object.keys(playback_visuals).map((key, index) => {
return visuals[key]
})}
</div>
)
I have tried changing around my usage of useRef and useState. Originally many of the defined states were refs but I just can not get them to set. I have set a useEffect with a dependency on the playback_visual_refs.current state but it never would run.