Today I finished my first TypeScript experiment with React. Here are some thoughts after using ReasonReact first, and now TypeScript second. Setup Is Not Better Than ReasonReact I used Create React App to bootstrap the app. npx create-react-app <project-name> –typescript But then I had to setup ESLint and Prettier with TypeScript. ReasonML & BuckleScript: npm install -g bs-platform bsb -init <project-name> -theme react-hooks After that you’re done.
Raise your hand ✋, if you’ve seen this error in your React application: Warning: Can’t call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. The Problem This error often happens when you make an asynchronous request for data, but the component unmounts. For example, some logic in your app tells React to navigate away from the component.
I wrote about my Gatsby build time woes yesterday. Unfortunately, Netlify and Gatsby rebuild my site completely with every update. I use the gatsby-plugin-netlify-cache but build times are still high. While searching for ways to optimize my Netlify build I stumbled upon an issue on the Gatsby repository. The issue was merged into master and published to email@example.com. Before: At the moment this hash changes if anything within ./src has changed between builds.
I’m a big fan of Dave Ceddia’s blog for bite-sized overviews of React Hooks. For example, the articles A Simple Intro to React Hooks or How the useContext Hook Works are excellent short introductions to a complex topic. Yesterday, I found this gem: Thinking in React Hooks The article compares class-based React components to React hooks in a concise, and visually appealing way. I recommend checking out the article, even if you’re already familiar with React hooks.