with Typescript.

No matter what people have said I think Redux is still an awesome way to manage state with React. I really enjoy how it makes testing easier, separates application logic from the presentation and how easy it is to debug using the Redux DevTools. I’ve written dozens of apps using it and I will write more in future.

Main issue people seem to have with Redux is the amount of boilerplate required make anything useful with it and I share that complaint too. …


The React Developer Tools is awesome part of React.js developer experience when digging into unknown code bases — or your own after a while.

But sometimes it just fails and displays your component names as <Unknown>. Why? Let’s go through the different components types to see how the name is set on them and let’s examine why sometimes it’s not there. Finally we’ll see what can be done about it.

I’m assuming EcmaScript spec 2015 or later here.

Function Declarations

JavaScript has a simple reflection API for function names

Classes


Pure render optimized React components can be extremely performant but it requires users to treat their data as immutable for it to work properly. Unfortunately due to nature of Javascript it can be quite challenging sometimes.

tl;dr. The anti-pattern is creating new arrays, objects, functions or any other new identities during render or in Redux connect(mapState).

Pure render?

With React.js pure render I mean components that implement the shouldComponentUpdate method with shallow equality checks. Examples of this are the React.PureComponent, PureRenderMixin, recompose/pure and many others.

Why?

It is probably the single most significant performance optimization you can do in React. It is also basically what ClojureScript wrappers for React can do by default and is why they can claim to be faster than vanilla React. For it to work immutable data structures must be used for the state because it makes it really cheap to check whether it is necessary to re-render the components. With mutable data deep equality checks are required which can be really expensive. In ClojureScript this is easy because everything is immutable always. …

About

Esa-Matti Suuronen

I write code and jump from airplanes

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store