Pagepro Blog

React TL;DR

React TL;DR #2 – A Human Filter For Most Useful React Content

Posted on .

React TL;DR #2 – A Human Filter For Most Useful React Content

Introduction

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.

Read the full article


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

Read the full article


React v16.9.0 and the Roadmap Update

New Deprecations:

  • You will now see a warning when using any of the old names of unsafe lifecycle method
  • Using “javascript:” URLs now will log a warning
  • No support for “factory” component that returns an object with a render method

New Features:

  • 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

Bugfixes:

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

Read the full article


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

Read the full article


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.

Read the full article


Stay updated with the newest React TL;DR. 

Join React TL;DR on Facebook!

 

Mariusz Marcak

Mariusz Marcak

http://www.pagepro.co

There are no comments.

View Comments (0) ...
Navigation