React Function Components

Are the hot new awesomeness around town, here are a few things I've learned about them that weren't immediately clear by reading the documentation.

Local functions

When creating functions locally (within your component, likely for event handlers) you should use useCallback to ensure that each time something changes in the component it doesn't pass a new reference of the function into the handler property. You can think of this as the equivalent to the class method in a class component.

So this

import * as React from 'react'

const MyComponent: React.FC = props => {

  function myHandlerFunc () {    // do the things!
  }

  return (
    <button onClick={myHandlerFunc}></button>
  )
}

becomes this

import * as React from 'react'

const MyComponent: React.FC = props => {

  const myHandlerFunc = React.useCallback(() => {    // do the things!
  }, [])

  return (
    <button onClick={myHandlerFunc}></button>
  )
}