8XL

localStorage.setItem('ключ', JSON.stringify(что нужно сохранить))
  ...
  //onload
 const savedData = JSON.parse(localStorage.getItem('тот самый ключ'))

<Parent>
  <Children openModal={this.state.openModal} onChange={this.onChange} />
<Parent />

onChange=()=>{
  this.setState({openModal : true})
}

<div onClick={this.props.onChange}>
  ...какие-то элементы...
</div>

React.useEffect(()=>{
  document.addEventListener('onmousedown', handleClick)
    return()=> document.removeEventListener('onmousedown', handleClick)
}, [])

React.useEffect(()=>{
//вешаем листенер
  document.addEventListener('onmousedown', handleClick) 
// в зависимости хука заносим пустой массив. Таким образом мы с помощью хука выполним метод
 //componentDidMount(), вызвав useEffect 1 раз
}, [])

React.useEffect(()=>{
...какой-то код...
//удаляем листенер
 return ()=> document.removeEventListener('onmousedown', handleClick)
//после return прописываем методы, которые нужно выполнить после при размонтировании компонента
//componentWillUnmount() аналог на хуках
}, [])

<div className={ props.name == 'LastAppointments' ? 'row' : 'column' }> какой то код </div>

function Child ({data, sayHi}) {

  const handleClick = useCallback(el => {
    sayHi(el)
  }, [])

  return (
    <div className="App">
      {data.map(el=>
        <div
          onClick={()=>handleClick(el)}
        >
          {el}
        </div>
      )}
    </div>
  )
}

export default function App() {
  const data = [1,2,3,4]
  
  const sayHi = (el) => {
    console.log('Hi '+ el)
  } 

  return (
    <Child data={data} sayHi={sayHi} />
  )
}

React.useEffect(()=>{
// добавление слушателя на все окно
    window.addEventListener('mousemove', mouseMove); 
    window.addEventListener('mouseup', mouseUp);
    
      return () => {
// удаление слушателя после обновления эффекта
        window.removeEventListener('mousemove', mouseMove); 
        window.removeEventListener('mouseup', mouseUp);
      }             
    }
  )

// эвент движения
  const mouseMove = (e) => { 
    if(motion.active){
// считаем дельту положения мышки в моменте и первоначального положения
      const delta = e.pageY - motion.stY;

setMotion(motion=>( 
          {
            ...motion,
            y: delta
          }
        )
      )
    }
  }

// эвент отпускания клавиши и конец днд
  const mouseUp = () =>{
    setMotion(motion=>(
      {
        ...motion,
        i: null,
        active: false,
        y: 0,
      })
    )
  }