Как использовать useMemo / useCallback в Input?

Question

[madc0de]

Не пойму как использовать useCallback / useMemo, чтобы предотвратить ререндеринг, тем самым сделать работоспособный checkbox css (input:checked + label) + текст не моргал.

const changeConfirm = () => setConfim(!confirm)
  <Field type="checkbox" placeholder='text' onInput={changeConfirm} />

export const Field = ({ type, placeholder, onInput }) => {
  const InputRadio = () => {
    return (
      <div>
        <input
          type="checkbox"
          onChange={onInput}
        />
        <label
          dangerouslySetInnerHTML={{ __html: placeholder }}
        ></label>
      </div>
    )
  }

  return (
    <div>
      {type === 'checkbox' ? <InputRadio /> : <InputText />}
    </div>
  )
}

Comments

[WbICHA]

Зачем ты вообще создаёшь компонент внутри компонента?

[madc0de]

WbICHA, вытащил из компонента и заработала. Но все же как прваильно все обернуть в useMemo / useCallback ?

[WbICHA]

madc0de, как запихнуть функцию в юзКалбек? Ты серьёзно?

[madc0de]

WbICHA, я понимаю как это все сделать. Я не могу до конца понять когда использовать useCallback / useMemo. Когда хорошо / когда плохо.