React TL;DR Recap. The Most Useful React Content From 2019

Share

All React + TypeScript Cheatsheets

  • The Basic Cheatsheet (/README.md) is focused on helping React devs just start using TS in React apps
  • The Advanced Cheatsheet (/ADVANCED.md) helps show and explain advanced usage of generic types for people writing reusable type utilities/functions/render prop/higher ordercomponents and TS+React libraries.
  • The Migrating Cheatsheet (/MIGRATING.md) helps collate advice for incrementally migrating large codebases from JS or Flow, from people who have done it.
  • The HOC Cheatsheet (/HOC.md) specifically teaches people to write HOCs with examples.

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.

Introducing Concurrent Mode (Experimental)

Concurrent Mode is a set of new features (still experimental!) that help React apps stay responsive and adjust to the user’s device capabilities and network speed.

Features:

  • Suspense for Data Fetching – describes a new mechanism for fetching data in React components.
  • Concurrent UI Patterns – shows some UI patterns made possible by Concurrent Mode and Suspense.
  • Adopting Concurrent Mode – explains how you can try Concurrent Mode in your project.
  • Concurrent Mode API Reference – documents the new APIs available in experimental builds.

Announcing React Native 0.61 with Fast Refresh

Fast Refresh:

  • fully supports modern React, including function components and Hooks.
  • recovers after typos and other mistakes, and falls back to a full reload when needed.
  • doesn’t perform invasive code transformations so it’s reliable enough to be on by default.

Other Improvements and changes:

  • Fixed use_frameworks! CocoaPods support.
  • Add useWindowDimensions Hook – This new Hook automatically provides and subscribes to dimension updates, and can be used instead of the Dimensions API in most cases.
  • Remove React .xcodeproj.

Functional Programming in JavaScript: How and Why?

Functional Programming is a programming paradigm where you mostly construct and structure your code using functions.

Features:

  • 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.

Benefits:

  • It doesn’t have side-effects and it’s immutable
  • It’s clean, straightforward and KISS

Test Driven Development (TDD) with React, React Testing Library, and Jest

A strategy for writing a good test:

  • Write a test that fails (RED). This is to avoid false positives (tests passing when they shouldn’t be)
  • Write the minimum amount of code required to get the test passing (GREEN).
  • Refactor the code (REFACTOR). This might mean writing a more efficient technical solution or a more refined approach. As long as the test continues to stay green, you know there is no regression.

Announcing TypeScript 3.7

TypeScript 3.7 arrived with a lot of great features 🎉🎉🎉

Features:

  • Optional Chaining
  • Nullish Coalescing
  • Assertion Functions
  • Better Support for never-Returning Functions
  • –declaration and –allowJs
  • (More) Recursive Type Aliases
  • The useDefineForClassFields Flag and The declare Property Modifier
  • Build-Free Editing with Project References
  • Uncalled Function Checks
  • Flatter Error Reporting
  • // @ts-nocheck in TypeScript Files
  • Semicolon Formatter Option
  • Website and Playground Updates

Breaking Changes:

  • DOM Changes
  • Class Field Mitigations
  • Function Truthy Checks
  • Local and Imported Type Declarations Now Conflict
  • API Change

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.

Comments
Leave a Reply

View Comments (0)...

Related articles:

React TL;DR #8 – Most Useful React Content From February 2020

React TL;DR #7 – Most Useful React Content From January 2020