Impossible to update state while typing in input in fresh

Question

I am new using Fresh by Deno, and I am trying to update the state of a Preact component while typing text into an input.

export default function Calculous(props: CalculousProps) {
  const [input, setInput] = useState<string>('');

  const onSubmit = (event: h.JSX.TargetedEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log(input);
  }

  useEffect(() => {
    console.log(input);
  }, [input])

  return (
      <form onSubmit={onSubmit}>
        <input type="text" value={input} onChange={(e) => setInput(e.target.value)} />
        <button disabled={isNaN(Number(input))} type="submit">Next</button>
      </form>
  );
}

However, when I type text on my component, it doesn't re-render until I unfocus the input. Do you know how to trigger re-rendering to update my state ?

Thanks for your help

Answer 1

You should generally use onInput instead of onChange when using Preact with an input element.

React chose to use the name onChange for the event listener callback property for both the change and input events. Preact's API is more semantic and better aligned with the spec in this case.