Исправить ошибки

Условие

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

const CountDisplay = (props) =>{
  const [val] = useState(props.c)
  return <div>{val}</div>
}


const App = () => {
  const [count, setCount] = useState(0)

  const handleClick = () => {
    setCount(c => c + 1)
  }
  
  return (<div>
    <button onClick={handleClick}>
      <span>⚛️</span> {count}
    </button>
    <CountDisplay c={count} />
  </div>
  )
}


export default App

Ответ

CountDisplay сохраняет только начальный props.c в своём state, поэтому остаётся на нуле. Для отображения актуального счётчика локальное состояние не нужно: выводите prop напрямую.

const CountDisplay = ({ c }) => <div>{c}</div>;

useState(initialValue) использует аргумент при первом монтировании и не синхронизирует его с последующими props. Родитель уже корректно обновляет count функциональным updater, поэтому дополнительный useEffect для копирования значения только усложнил бы компонент. Неиспользуемые useRef/useEffect можно удалить из импортов. Если дочернему компоненту действительно нужен независимый редактируемый черновик, правила синхронизации будут отдельной задачей.