Prevent onClick event on clicking child component

Note to myself — Sun, 03 Jul 2022 18:43:14 +0000

On situations when you want to trigger an onClick event when you click on a box but you have an input inside of it. In this case you will trigger the onClick event whenever you are willing to type in any input.
To prevent this write a function to stop propagation and add it to the child(input).

  function handleClicked {
    // Do something.
  }
  function stopPropagation(e) {
    e.stopPropagation();
  }

  return (
    <div>
      <div onClick={handleClicked}>
        <input onClick={stopPropagation} />
      </div>
    </div>
  );

React 18: useTransition

Note to myself — Mon, 30 May 2022 08:04:09 +0000

Can boost performance by delaying high cost actions.
Added in React 18

example)


import { useState, useTransition } from 'react';

function App () {
  const [value, setValue] = useState("");
  const [isPending, startTransition] = useTransition();

  return (
    <div>
      <input
        onChange={(e) => {
          startTransition(() => {
            setValue(e.target.value);
          });
        }}
      />
      {isLoading ? "Loading..." : "Loaded"}
    </div>
  );
}

Forem: Note to myself

Prevent onClick event on clicking child component

React 18: useTransition