React Tips and Tricks

You don't need to memoize everything

See React useMemo and useCallback.

Try to avoid using useEffect

See React useEffect

Managing State

The React docs have amazing content on Managing State.

Don't mirror state

function ({ someColor }) {
  const [color, setColor] = useState(someColor)
}

If someColor changes, color will not. color was merely initialized by someColor.

useContext

In the great article Passing Data Deeply with Context from the React Beta docs, they recommend passing props deeply before reaching for contexts. I agree, though I hesitate to agree with the claim that,

I would say that is unusual. That said, I strongly agree with the idea of refactoring your component hierarchy before you reach for contexts. You likely can leverage props.children to create the hierarchy you desire without having the props "leave" the parent component.

function Parent(props) {
  return (
    <A>
      <B>
        <C>{props.datum}</C>
      </B>
    </A>
  );
}