React TL;DR #11 – Top React Content From May 2020


What’s New In DevTools (Chrome 83)

  • Emulate vision deficiencies
  • Emulate locales
  • Cross-Origin Embedder Policy (COEP) debugging
  • New icons for breakpoints, conditional breakpoints, and logpoints
  • View network requests that set a specific cookie
  • Dock to left from the Command Menu
  • The Settings option in the Main Menu has moved
  • The Audits panel is now the Lighthouse panel
  • Delete all Local Overrides in a folder
  • Updated Long Tasks UI
  • Maskable icon support in the Manifest pane

Announcing React Native for macOS and more

  • New Features from React Native 0.62, like Appearance and useColorScheme() hooks
  • Visual Studio V142 build tools are now used
  • Better RTL support
  • New native module APIs (REACT_INIT and REACT_FUNCTION)
  • Improved diagnostics in command line tools
  • Initial ARM64 support
  • Experimental support for binary distribution of React Native Windows
  • Bug fixes and reliability improvements

15 React Best Practices You Need to Follow in 2020

  • 🐛 Keep components small and function-specific
  • ♻️ Reusability is important, so keep creation of new components to the minimum required
  • 🤝 Consolidate duplicate code – DRY your code
  • 🎨 Put CSS in JavaScript
  • 📝 Comment only where necessary
  • 📛 Name the component after the function
  • 🦒 Use capitals for component names
  • 🐫 Mind the other naming conventions
  • 🎭 Separate stateful aspects from rendering
  • 🚀 Code should execute as expected and be testable
  • 📁 All files related to any one component should be in a single folder
  • 🧰 Use tools like Bit
  • 📚 Use snippet libraries
  • ✍️ Write tests for all code
  • 🔗 Follow linting rules, break up lines that are too long

What the heck is React Fast Refresh

React-Hot-Loader has been your friendly neighbour, living outside of React. But it has been limiting its powers and causing not the greatest experience. It’s time to make a next step.

Some key points:

  • it will re-render a React component when we edit a module that exports only React components
  • it will reload all React components that import a non-React module and the module itself, when we edit it
  • it will do a full reload when we edit a module outside of the React tree
  • it will continue working once we resolve a syntax or a runtime error without having to reload manually
  • local state will be preserved for function components and Hooks out of the box
  • local state won’t be preserved for class components

Stay updated with the newest React TL;DR. 

What is React TL;DR?

React TL;DR helps you decide which content is worth your time.

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 – your filter for most useful React content.

Leave a Reply

View Comments (0)...

Related articles:

2020 React TL;DR Recap. Top React Content From 2020

React TL;DR #15 – Top React Content From December 2020