'How would I do this in React?

I plan to make a pixel art demo where you can draw in real time on a canvas. There would be tools to select which colour to use, whether to erase etc.

I was told to use React for anything UI-related. Initially I made a demo in React which has a 2d Grid component which has Pixel components as its children. For a 100x100 image, that would be 10000 pixel components. It's extremely slow, presumably because of all the re-rendering during the onMouseOver.

I'm not sure if I should be using React for the actual drawing part? Do I simply have a React component that contains a canvas object and write the drawing code myself in Typescript? And have react components for things like selecting the drawing tool?

reactjs

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How would I do this in React?

Sources

Related Questions