Я представляю два разных способа визуализации компонента ввода;

Пример 1

function myComponent(){                 
const [st, setSt] = useState('');       
                                        
return <div>                            
{Math.random()}                         
<input value = {st}                      
  onChange = {e=>setSt(e.target.value)/>  
</div> 

Например. 2

 function StateHelper() {
  const [st, setSt] = useState("");

  return { context: { st, setSt } };
}

function MyHelper(prop) {
  const ActualComponent = prop.capture;

  return <ActualComponent />;
}

function MyComponent() {
  const { context } = StateHelper();

  const capturedComponent = () => (
    <input
      value = {context.st}
      onChange = {(e) => {
        context.setSt(e.target.value);
      }}
    />
  );

  return <MyHelper capture = {capturedComponent} />;
}

Runnable Fiddle Например, 2

Кажется, я запутался в одной из основ.

Например, 1, когда я печатаю, я не теряю фокус на компоненте ввода.
Например, 2, на каждой набранной букве я теряю фокус.

В обоих этих примерах Math.random() изменяется, поэтому они оба перерисовываются.

Я не знаю, в чем разница и почему я продолжаю терять внимание, например. 2 ?

Я пытаюсь следовать, например. 2, так как это помогает мне лучше управлять своим кодом, но я не могу его понять. Что я не понимаю в повторном рендеринге компонентов реагирования и как это исправить?

🤔 А знаете ли вы, что...
JavaScript можно использовать для манипуляции DOM (Document Object Model), что позволяет изменять содержимое и структуру веб-страницы.