import { useEffect, useState, startTransition } from "react"; import "./styles.css"; export default function App() { // handle input changes, this should lag in React 17 const [input, setInput] = useState(""); function onChange(event) { setInput(event.target.value); } const width = 600, height = 600, stepSize = 10; // holds the full random walk as an array of // { start: [x, y ], end: [x, y]} // objects – this is designed to be inefficient/naive const [randomWalk, setRandomWalk] = useState([ { start: [width / 2, height / 2], end: [width / 2, height / 2] } ]); const lastStep = randomWalk[randomWalk.length - 1]; // adds new random step to our walk function addStep() { // we need to grab latest randomWalk value // because this runs from an interval in a useEffect setRandomWalk((randomWalk) => { const lastStep = randomWalk[randomWalk.length - 1]; // move in negative direction randomly let horizontalDirection = Math.random() > 0.5 ? -1 : 1; let verticalDirection = Math.random() > 0.5 ? -1 : 1; // prefer avoiding edges if (lastStep[0] > width) { horizontalDirection = -1; } else if (lastStep[0] < 0) { horizontalDirection = 1; } if (lastStep[1] > height) { verticalDirection = 1; } else if (lastStep[1] < 0) { verticalDirection = -1; } return [ ...randomWalk, { // each step starts where last one finished start: lastStep.end, // add 10px in a random direction end: [ lastStep.end[0] + Math.random() * stepSize * horizontalDirection, lastStep.end[1] + Math.random() * stepSize * verticalDirection ] } ]; }); } // start random walk on component mount useEffect(() => { // we mark the random walk as a transition // which marks its rendering as "less important" const interval = setInterval(() => startTransition(addStep)); // stop interval on unmount return () => clearInterval(interval); }, []); return (

Random Walk in React 18

Type here to see lag:

); }

react-18-random-walk