react-hooks.js

// index.js
export const UserContext = React.createContext();
ReactDOM.render(<UserContext.Provider> <App /> </UserContext.Provider>, document.getElementById('root'));



// App.js
import React, {useState, useEffect, useContext} from 'react';
import { UserContext } from './index.js';

const AppFunction = () => {
  
    const value = useContext(UserContext);

    const [count, setCount] = useState(0);
    const [isOn, toggleColor] = useState(true);
    const [mouse, setCoords] = useState({x:null, y:null});

    useEffect(() => {
        window.addEventListener('mousemove', handleMouseMove);
        return () => {
            window.removeEventListener('mousemove', handleMouseMove);
        }
    }, []) // this effect should be called only once

    useEffect(() => {
        console.log(' 222 Changing ');
        return () => {
            console.log(' 222 useeffect rmovd')
        }
    }, [isOn]) // this effect is ccalled everytime `isOn` changes

    useEffect(() => {
        console.log('1111 cangng');
        return () => {
            console.log('11111 rmovd')
        }
    }, [isOn]) // this effect is ccalled everytime `isOn` changes

    const handleMouseMove = (event) => {
        setCoords({
            x:  event.pageX,
            y:  event.pageY
        })
    }

    const incrementCount = () => {
        setCount(count + 1);
        console.log('* incrmnt -- count' + count);
        document.title=`clicked ${count} times`;
    }

    const toggle = () => {
        toggleColor(isOn => !isOn)
    }

    return <>
        <script>
            console.log('* dom -- count' + count);
            {document.title=`clicked ${count} times`}
        </script>
        <br/>
        <br/>
        <button onClick={incrementCount}> 
            I was clicked {count} times 
        </button>
        <br/>
        <br/>

        <div style={{width: '50px', height: '50px', backgroundColor: isOn ? 'grey' : 'yellow'}} 
            onClick={toggle}></div>
        <br/>

        <img src={isOn? 'https://icon.now.sh/add_shopping_cart' : 'https://icon.now.sh/trash'} alt="abc"
             style={{widht: '50px', height: '50px'}}
             onClick={toggle}></img>

        <br/>
        <h2> MOUSE </h2>
        <p> Mouse x: {mouse.x} </p>
        <p> Mouse y: {mouse.y} </p>
    </>;
};

export default AppFunction;