Update to function component examples about react-pts-canvas-examples HOT 10 CLOSED

oh I didn't know about this repo, nifty :).

Seems like the build has botched the demo link. Pulled it locally, dev mode works, prod build as well. Not sure how github pages works nowadays so can't really help. I'm gonna skim through the new code example now, but admittedly I'm not used to the new syntax yet so it feels foreign.

from react-pts-canvas-examples.

I just have 10m so I'll write here first, I can PR later or anyone feel free to take it. Also let me know if you disagree, I went through super quick so might have missed stuff.

For the chart example, I'd have gone with useMemo instead of useRef. It's the hook made to recompute expensive stuff based on declared dependencies.

For the animation example, I'd have gone with useState instead of useRef. It's the hook made to recompute stuff based on events.

Cheers

from react-pts-canvas-examples.

The dependencies basically trigger re-execution of the effect when their value changes. So here we would expect the handlers to be added as dependencies. I can't recall if there are necessary tricks when the dependency is a function though. I usually test it out and visualise it with some logs.

from react-pts-canvas-examples.

Thanks again @tibotiber. I fixed the demo code and it's now working well -- much better without useRef!

Edit: linking to this PR in react-pts-canvas repo

from react-pts-canvas-examples.

Hi @prkirby and @tibotiber - I've updated all the examples (see PtsExamples.jsx) in this repo to use the new functional component.

If you can have time to help review the code and send PR as needed, it would be great appreciated! 🙏

from react-pts-canvas-examples.

Thank you @tibotiber -- I'll give it a try. I have lots to learn in the new React way!

from react-pts-canvas-examples.

Good, this is a prime opportunity ;). Feel free to reach out with any question, happy to help! And if you're tight I can also do the PR, let me know.

from react-pts-canvas-examples.

Hey @tibotiber - I tried your suggestions but couldn't get it to work. I'm guessing because the onAnimate handler will be passed into the spaceRef inside an useEffect (ie, here), so the props/states changes won't show up within the animate handler (maybe?). I also tried wrapping handleAnimate in a useCallback, but it didn't help either.

Any thoughts on this?

  const [noiseGrid, setNoiseGrid]  = useState([]);

  const reset = (space) => {
    const gd = Create.gridPts( space.innerBound, 20, 20 );
    setNoiseGrid( Create.noisePts( gd, 0.05, 0.1, 20, 20 ) );
  }

  const handleStart = (bound, space) => {
    reset(space);
  };

  const handleAnimate = (space, form, time) => {
    // !! not getting the latest noiseGrid state, it remains empty
    console.log( noiseGrid );
  }

from react-pts-canvas-examples.

Sorry for the late reply @williamngan, it's a rough couple of weeks. From what I see, it could be a bug in the new version, rather than the way you use it. Basically spaceRef.current.add() called here is running in a useEffect that only has canvRef as dependency. This means new handler props would not be applied on the space. I'm not super familiar with the new internals yet, maybe @prkirby could provide some thoughts on this?

from react-pts-canvas-examples.

Thanks @tibotiber ! Ah I see, so if we add spaceRef (and others) to the dependencies, that might fix it?

Take care and thanks for looking into this despite your busy schedule.

from react-pts-canvas-examples.