Форма теряет фокус после ввода одного символа?

Question

Я создал форму с прикрепленным к ней состоянием, но после каждого ввода символов форма теряет фокус. я понимаю это, потому что состояние вызывает рендеринг формы, как мне избежать этого?

import axios from 'axios'

const App = () => {
  const [countries,setCountries] =useState([])
  const [ newName,setnewName ] = useState('')

  useEffect(()=>{
    axios.get('https://restcountries.eu/rest/v2/all')
    .then(response=>{
      setCountries(response.data)
    })
  },[])

  const handleChange = (event) =>{
    setnewName(event.target.value)
  }
  const Finder = ()=>{

    return(
      <div>
        <form>
          <div>
            Find country : <input value={newName} onChange={handleChange} />
          </div>
        </form>
      </div>
    )
  }

  return(
    <div>
    <p>Meow</p>
    <Finder/>
    </div>
  )

}

export default App```

Answer 1

Когда вы визуализируете Finder как компонент, и он будет создавать новую функцию для каждого и каждого рендера, вместо этого, когда вы визуализируете его внутри компонента, вызывайте его как function, как показано ниже

попробуйте изменить оператор возврата как

return(
  <div>
   <p>Meow</p>
   {Finder()}
  </div>
)

Пожалуйста, от go до этой песочницы для справки