Toggling material transparency

[chrislicodes]

Hey! I want to dynamically change the material transparency and color after a certain event happens (e.g. mouseOver or Click).
Changing the color is not a problem, however the transparency is not getting updated and I don't understand why.. 🤔

Is there a way to trigger material.needsUpdate only once? Probably via ref and then check for changes in the transparency prop?

Small Example Sandbox: https://codesandbox.io/s/clever-swirles-qzdcs4?file=/src/App.tsx

It works if I set all materials to transparent={true} from the start and then change the opacity, but in the real use case there are a lot of layered materials and if they are all transparent and opacity = 1 besides one, then it messes with the render/transparency order/

Any ideas how I can fix this?

EDIT: seems like adding a ref and triggering the update in useLayoutEffect is doing the job, but not sure if this is the best way

[chrislicodes]

Answered here: Reddit