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)

#react-tool #react #react-native #react-development