Prevent Rerenders and Add Functionality with Jotai Write-only Atoms

We have a naive SVG app that can draw dots onto a canvas as the mouse scrolls over. You’ll notice as you drag the mouse around the canvas that the commit count in the top left corner increases. This is because the SVG component rerenders on every dot that’s drawn.

The rerenders are due to the fact that we are using the dotsAtom directly in the component. This is where write-only atoms come in handy. They can receive a write function that will handle the updates to your atom state which will fix the rerender issue.

We will also cover how to compose write-only atoms to add functionality.