Best of React HooksAugust 2022

  1. 1
    Article
    Avatar of joshwcomeauJosh W Comeau·4y

    Understanding useMemo and useCallback

    The main thing that React does is keep our UI in sync with our application state. The tool that it uses to do this is called a “re-render” Each re-render is a snapshot of what the application's UI should look like at a given moment in time. For example, let's suppose our example also features a digital clock. We could potentially run into some performance problems if we wind up doing this work gratuitously.

  2. 2
    Article
    Avatar of gcgitconnected·4y

    React code conventions and best practices

    React code conventions and best practices use linting and automatic formatter. Use PascalCase in components, interfaces, or type aliases. Prefer using typescript barrels A barrel is a way to roll up exports from several modules into a single convenient module.

  3. 3
    Article
    Avatar of honeypotHoneypot·4y

    9 Bad React Habits to Kick From Your Life

    React has become a word that developers worldwide hear on a regular basis. Too much flexibility makes it easy to pick up bad habits and poor practices. Here are some of the worst practices I’ve seen (and may or may not have done in the past) The useEffect hook is probably one of the first hooks a React developer learns.

  4. 4
    Article
    Avatar of communityCommunity Picks·4y

    React re-renders guide: everything, all at once

    Re -render happens when React needs to update the app with new data. Preventing re-renders with composition is an anti-pattern that can be the biggest performance killer. On every re-render React will re-mount this component (i.e. destroy it and re-create it from scratch), which is going to be much slower than a normal re-rendered. This pattern can be beneficial when a heavy component manages state.

  5. 5
    Article
    Avatar of communityCommunity Picks·4y

    Building a custom Hook

    Custom hook name must start with use to signal React that it is a custom hook, and it will guarantee React that this function will be used by respecting the rules of hooks.