why this code doesnt work? i create this custom hook to call hook useState:
export const useAnimer=({})=>{
const [animList, setAnimList] = useState({})
useEffect(()=>{
.......
onDone:(anim,name)=>{
console.log("anim list updating...")
setAnimList((a)=>{
console.log("anim list updated",a)
return a
})}
........
},[depedency])}
it's only print
console.log("anim list updating")
but never print
console.log("anim list updated")
here where onDone is used in anotherfile.js. it's called every 100ms inside asnyc function that returned promise object
const animIt = async (frame)=>{
while(true){
frame.pools.timepassed+=100
frame.pools.frames.forEach((a,i)=>{
a.onDone(a)
})
await new Promise(resolve=>
setTimeout(()=>{
resolve()
},100))
}
}
}
first, you cannot use hooks in this way a[name]=anim you can add new values to object like this {...a,[name]:anim} and then add it to your state : setAnimList({...a,[name]:anim})
second, if I were you I would define Arrow function and return it, something like this:
export const useAnimer=({})=> {
const [animList, setAnimList] = useState({})
const handleAddAnim = (anim, name) => {
setAnimList({...animList, [name]: anim})
}
return {
animList,
handleAddAnim
}
}
and whenever I want to use it i would call it in this way :
const {animList, handleAddAnim} = useAnimer();
hope I'm helpful