React Best Practices for 2021 (blog.asayer.io)

Best practice is to avoid it.

Meh. These aren't great tips. One of these tips is for class components, which while still relevant, aren't exactly new as of 2021. I learned that class binding trick in 2017.

Using hooks and useMemo? That's essentially stolen from the React tutorials.

Pure functions? Sure, that's useful but the example is ridiculous. How would you have an impure comparison function?

In general not a huge fan of these filler content marketing front end posts. If you're gonna advertise your company, at least provide some interesting content.

This is frankly a rather mediocre article, and exists more as a plug for a company's service than really useful advice. For one thing, with function components there is no `this`, so tip #2 is useless (and this is especially odd given that the other tips talk about using hooks, which _only_ work in function components).

There's many other articles that are much more useful than this one. To point to a few off the top of my head:

- https://alexkondov.com/tao-of-react/ : a useful list of patterns and practices when writing React code

- https://leerob.io/blog/react-state-management : a recent summary of how React state management approaches have changed over time, with some current suggestions

- https://daveceddia.com/react-ecosystem-overview/ : a summary of the React ecosystem as it currently stands

and I personally have put up a lot of material over the last year that is _much_ more useful than this:

- https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-...: a deep technical dive into how React rendering works (when, why, how, and nuances in behavior), including looks at how Context and React-Redux interact with rendering

- https://blog.isquaredsoftware.com/2021/01/context-redux-diff... : a comparison of the capabilities and use cases for React's Context API, the `useReducer` hook, and Redux/React-Redux

- https://blog.isquaredsoftware.com/2020/12/presentations-reac... : an updated intro to React with hooks, Redux / Redux Toolkit, and TypeScript

Any one of the posts I just linked would be much more worth your time.

Really wish the author had gone all in on hook patterns rather than start with component patterns and make a transition.

1. Use TypeScript to catch errors early

2. Use hooks

3. Build your data access layer as custom hooks -- e.g. const { isLoggedIn, loggin } = useAuth();

4. Tips on refactoring to have testable components

5. Understand when to use memoization -- expensive is in the eye of the beholder.

No strong objections to the 6 recommendations here per se, but the use of a class component in the first example was a telling hint that this isn't exactly a definitive guide.