React Developer Tooling

Today I am going to talk about developer tooling to improve these 3 areas.

• Write code quickly
• Debug code effectively
• Update code easily

1. Fast Refresh (write code quickly)

Fast refresh makes your React app reloads slick and painless on code changes and Re-renders only the required React components if a code change is made instead of reloading the entire app.

Is it the same as hot reloading?

The answer is NO. The hot reloading has some limitations.

• No function component support (React hook)
• No error recovery
• Often did not reload after changes
• Required brittle code transforms

How is Fast Refresh different?

• First class feature for React core team
• Built for all renderers
• Supports function components and Hooks
• Recovers after errors

How does Fast Refresh work?

• Decides when to ‘update’ or ‘remount’
• Computes a component ‘signature’

What are limitations of Fast Refresh?

• Resets class component state
• Mixed React and non-React exports
• Memoization

When can you use Fast Refresh?

• React Native v61+
• React DOM (soon)

2. Developer Tools (debug code effectively)

Why rewrite React DevTools?

• Better performance
• Support new APIs
• Add new UX features

What can you do with React DevTools?

• Navigate Unfamiliar Projects
• Iterate and Test
• Profile and Measure Performance

3. Codemods (update code easily)

What is a codemod?

• Tool for refactoring large codebase
• Like a really smart field find-and-replace

How do codemods work?

It starts by reading Javascript source code from the file. The source code is parsed and converted into an abstract syntax tree or AST for short.

An AST is a tree representation of the structure of a program.

Each node in the tree corresponds to an element in the source code.

The codemod itself is a small Javascript program that modifies this tree. And it can do more complicated edits than find and replace code.

What are codemods good for?

• Renaming things
• Reordering things
• Replacing things(under certain conditions)

What are codemods not good for?

• Complex behavioral changes
• Fixing bugs

Check React codemods here!

And you can also check the Demo!

That’s it for today.

Stay tuned! Happy coding!