Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

E14 Mouse Follower

Public visualization

Viewing a saved revision (read-only)

1eff153d70774a25b44acecf1cfa842f

E14 Mouse Follower

0 stars1🌍 Public
VVanessa
Last edited Jan 31, 2021
Created on Jan 4, 2021

A yellow circle follows the mouse cursor across an SVG canvas, moving smoothly as the pointer travels. The example demonstrates interaction with React by using the `useState` hook to store the mouse's x and y coordinates, updating them via the `onMouseMove` event. The `useCallback` hook memoizes the event listener to optimize performance, while `ReactDOM.render` mounts the component. The circle's position is bound directly to the state, leveraging unidirectional data flow to keep the visualization in sync with user input.

AI-generated description

Follows your mouse with a circle

Datavis 2020 Episode 14 - Interaction With React https://www.youtube.com/watch?v=9zzIwsASgeo

Uses unidirectional data flow (the useState hook), and memoization of event listeners (the useCallback hook).