Components
React components include common best practices for good performances, maintainability and ease of use. Here are some of the design decisions for the generated code.
Any question about the design decisions? Anything not matching your project practices? Please let us know! we may add an option for the flexibility you need.
We consider components should be memoized by default, which should be beneficial in most cases. If it appears to have a negative impact on specific scenarios, the impact remains very small and memoization can be removed in that case.
For this reason, all generated components are wrapped into
memo().All properties exposed by the component for overrides are listed in the component
Props’ interface. Please refer to the instances article for more details about the overrides.All components use named exports. While many examples on Internet use default exports, named exports have more benefits, e.g. in terms of usage (auto-import, auto-completion from IDEs) and performance (considering ES6 modules and tree shaking).
export const Card: FC<Props> = memo(function Card(props = {}) {
// ...
}
Card is defined twice: as the exported variable name and the inner function.- The exported variable is required for named exports.
- The inner function is named (instead of anonymous) to name the component function, which helps showing better stack traces when debugging. This practice can be enforced by an ESLint config.
In TypeScript, imports of other TypeScript files typically don't have extensions. E.g.:
import { Dropdown } from './Dropdown';
It's an assumption TypeScript has made in its early days, but not the final standard of EcmaScript modules. For unclear reasons (at least for me), the TypeScript transpilation to JavaScript doesn't add the .js extension.
To be able to bundle in ES module format and be compatible with the latest standards and usages around ES modules, the recommendation is to append a ".js" extension to imports (yes, even if pointing to a TypeScript file). E.g.:
import { Dropdown } from './Dropdown.js';
That's the practice Clapy has adopted in the generated code.
This annotation is added in a comment above the component. Please leave it as it is. In an incoming release, we will use it to map a coded component to the corresponding Figma node, e.g. for updates.
Last modified 7mo ago