Coloris and react state?

[codergal6502]

Hi hi. I'm trying to use Coloris in a React application. Have others had success with that combination? My initial implementation that doesn't use Coloris works fine, but I'm finding there are issues with my React state being stale in ways I can't explain by JavaScript closure issues, though I'm far from an expert. Can I post some code here? I really hope I can get Coloris working. It's pretty great!

[mdbassit]

Hello, I don't have experience running Coloris in React, but I can try and help diagnose the problem if you provide a link where I can test.

[codergal6502]

Well, I was ultimately able to get it working! I have an outstanding question on Stack Overflow. React does make it challenging to work with libraries not designed for React, sometimes. I'm quite new to React. There seemed to be some interaction between a closure scope, React state, and Coloris. I don't understand why my fix works but it does.

I am curious if it's okay to repeatedly do Coloris({ parent: someHtmlElement }) to define the parent element? React components seem to re-render far more often than I'd like, and while from what I understand the real DOM should not get updated when the virtual DOM changes, it's not guarantee that a parent element won't get replaced arbitrarily by a mostly identical copy. That seems to be a possible consequence of how I'm using React.

My code is at https://github.com/codergal6502/ChocoWindow/blob/main/studio/src/components/modal-components/TileSetColorPalette.jsx. Though the call to init is in https://github.com/codergal6502/ChocoWindow/blob/main/studio/src/App.js.

In case you're curious, the fix I mentioned was to add a piece of React state between this function handleColorSubstitution that is part of that component and the the code that puts the color selected my Coloris into a transfer object to get passed into that function.

// without these two, colorSubstitutions in handleColorSubstitution is always one render behind.
const [colorisFixColorSubstitute, setColorisFixColorSubstitute] = useState();
useEffect(() => { if (colorisFixColorSubstitute) handleColorSubstitution(colorisFixColorSubstitute); }, [colorisFixColorSubstitute]);

[mdbassit]

You can do Coloris({ parent: someHtmlElement }) as often as you like