Render props example

MouseTrackerDemo.jsx

import React, {useState, useEffect} from 'react';

const MouseTracker = ({render}) =>{
  const [position, setPosition] = useState({x:0, y:0});

   useEffect(()=>{

    const updatePosition = (e) =>{
      setPosition({
        x: e.clientX,
        y: e.clientY,
      })
    }

    window.addEventListener('mousemove', updatePosition);

    return () => {
      window.removeEventListener('mousemove', updatePosition);
    }

   });

   return render(position)
}

export function App(props) {
  return (
    <div className='App'>
      <h1>Hello React.</h1>
      <h2>Start moving the mouse to see some magic happen!</h2>
      <MouseTracker render={({x,y})=><p aria-live="polite">Mouse position:{x}, {y}</p>} />
    </div>
  );
}