Loaders use cases
Loaders can be used to load any asset, lazy load components, or fetch data from a remote API. This feature was designed as a performance optimization to handle large story imports.
Storybook · Writing and testing · all subjects
loaders
7 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Loaders definition and purpose
Loaders are asynchronous functions that load data for a story and its decorators. A story's loaders run before the story renders, and the loaded data is injected into the story via its render context.
Args is recommended over loaders for story data
Args is the recommended way to manage story data. An ecosystem of tools and techniques is being built around Args that might not be compatible with loaded data. Loaders are an advanced feature and should only be used if you have a specific need that other means cannot fulfill.
Loaded data access in story context
The response obtained from a loader call is combined into a 'loaded' field on the story context, which is the second argument to a story function.
Global loaders configuration
Global loaders can be set for all stories via the 'loaders' export of the .storybook/preview.js file. This is the file where you configure all stories.
Loader definition levels
Like parameters, loaders can be defined globally, at the component level, and for a single story.
Loader execution and precedence rules
All loaders defined at all levels that apply to a story run before the story renders in Storybook's canvas. All loaders run in parallel. All results are in the 'loaded' field in the story context. If there are keys that overlap, later loaders take precedence with this order from lowest to highest: Global loaders (in the order they are defined), Component loaders (in the order they are defined), Story loaders (in the order they are defined).