Stephen WayStephen Way

JS Bytes #1

February 10, 2022

Bytes are small code snippets that I think are worth sharing.

Props Rest Spread Notation

This works best if styles are not involved, depending on what type of styling you use.

Event Handlers

Here’s an example of a component where the event handler has been written inline in the return statement:

const FooActivation = () => {
  const [foo, setFoo] = useState(false)

  return (
    <button
      onClick={() => {
        setFoo(true)
        console.log('Activated', foo)
      }}
    >
      Activate
    </button>
  )
}

This practice can eat at browser memory if we aren’t careful. Instead of inlining our function to handle clicking the button, we extract it outside the return statement so that React doesn’t have to rerun that function on each render.

const FooActivation = () => {
  const [foo, setFoo] = useState(false)
  // only run once
  const handleClick = (override?: boolean) => setFoo(override || true)
  return (
    <>
      <button onClick={handleClick}>Activate</button>
      {/* or if you have to pass in some data */}
      <button onClick={() => handleClick(false)}>Activate</button>
    </>
  )
}

.filter(Boolean)

Also end up using this a lot

CSS :has() for Forms