React TL;DR #2 – Top React Content of August 2019
What is React TL;DR?
How do you decide which React news can be useful to you? Or how something matches your interest or bring any value?
Content tools are easy to fool and collect a lot of crap that doesn’t really help or improve your work and this is why we decided to select the most useful React news ourselves.
Our TL;DR version delivers the essence from the article and helps you decide if it’s worth reading further to you.
Again – we don’t use any engines or tools. It is all selected by ourselves, based on what we have learned and gained profit from. No b#$%it provided.
Say hello to React TL;DR – a human filter for most useful React content.
React TL;DR – useful articles from August 2019
Interface vs Type alias in TypeScript 2.7
- You cannot use implements on a class with type alias if you use union operator within your type definition.
- You cannot use extends on an interface with type alias if you use union operator within your type definition.
- Declaration merging doesn’t work with type alias.
Functional Programming is a programming paradigm where you mostly construct and structure your code using functions.
- First-class citizens functions: you can always insert functions inside a function without any restrictions present.
- A higher-order function: a function that gets a function as an argument.
- Function Composition: an act of composing/creating functions that allow you to further simplify and compress your functions by taking functions as an argument and return an output.
- It doesn’t have side-effects and it’s immutable
- It’s clean, straightforward and KISS
React v16.9.0 and the Roadmap Update
- You will now see a warning when using any of the old names of unsafe lifecycle method
- No support for “factory” component that returns an object with a render method
- act() testing utility also accepts asynchronous functions
- Programmatic way to gather measurements called <React.Profiler> – measures how often app renders and what’s the “cost” of render is
- A crash when calling findDOMNode() inside a <Suspense> tree has been fixed.
- A memory leak caused by retaining deleted subtrees has been fixed too.
- An infinite loop caused by setState in useEffect now logs an error. (This is similar to the error you see when you call setState in componentDidUpdate in a class.)
Use React.memo() wisely
Use React.memo() when:
- You want to mimic PureComponent in function components.
- Your component renders often
- Your component is usually provided with the same props during re-rendering
- Your component contains a decent amount of UI elements to reason props equally check
5 Tips to Help You Avoid React Hooks Pitfalls
- Read React Hooks documentation and FAQ before you start.
- Install, use, and follow the ESLint plugin.
- Don’t think about Lifecycles, think about synchronizing side effects to state.
- Know that React is fast by default and do some digging before applying performance optimizations pre-maturely.
- Avoid testing implementation details.