A component with its own local state is often referred to as uncontrolled.

In contrast, a component is considered controlled when its key data and behavior are managed externally through props, rather than relying on its own local state. This approach allows the parent component to have full control over its behavior and data flow.

When designing a component, carefully consider which pieces of information should be controlled (managed via props) and which should remain uncontrolled (handled by the component’s state). However, keep in mind that you’re not locked into your initial decision—you can always refactor later as the needs of your application evolve.

References

React Doc, Freecodecamp

A module is just a file. One script is one module. As simple as that.

• To make import/export work, browsers need <script type="module">.
• Modules have several differences:
  • Deferred by default.
  • Async works on inline scripts.
  • To load external scripts from another origin (domain/protocol/port), CORS headers are needed.
  • Duplicate external scripts are ignored.
• Modules have their own, local top-level scope and interchange functionality via import/export.
• Modules always use strict.
• Module code is executed only once. Exports are created once and shared between importers.

When we use modules, each module implements the functionality and exports it. Then we use import to directly import it where it’s needed. The browser loads and evaluates the scripts automatically.

In production, people often use bundlers such as Webpack to bundle modules together for performance and other reasons.

References

javascript info