Chapter 776: State management in the Editor Starter

Core Idea

State in the Editor Starter is managed with the built-in React state management utilities: useState() and useContext().

Key Concepts

• Shape
• Undoable state
• Contexts
• Preventing state updates when nothing has changed
• Reading the state imperatively
• See also

Code Examples

type DeletedAsset = {
  remoteUrl: string | null;
  remoteFileKey: string | null;
  assetId: string;
  statusAtDeletion: AssetState;
};

export type UndoableState = {
  tracks: TrackType[];
  assets: Record<string, EditorStarterAsset>;
  items: Record<string, EditorStarterItem>;
  fps: number;
  compositionWidth: number;
  compositionHeight: number;
  deletedAssets: DeletedAsset[];
};

export type EditorState = {
  undoableState: UndoableState;
  selectedItems: string[];
  textItemEditing: string | null;
  textItemHoverPreview: TextItemHoverPreview | null;
  itemSelectedForCrop: string | null;
  renderingTasks: RenderingTask[];
  captioningTasks: CaptioningTask[];
  initialized: boolean;
  itemsBeingTrimmed: ItemBeingTrimmed[];
  loop: boolean;
  assetStatus: Record<string, AssetState>;
};

• What it demonstrates: Usage pattern for State management in the Editor Starter from the official docs.

Key Takeaways

1. Understand shape when working with State management in the Editor Starter.
2. Understand undoable state when working with State management in the Editor Starter.
3. Understand contexts when working with State management in the Editor Starter.
4. Understand preventing state updates when nothing has changed when working with State management in the Editor Starter.
5. Understand reading the state imperatively when working with State management in the Editor Starter.

Connects To

• Asset Cleanup: related page in the Editor Starter Template section.
• Asset Uploads: related page in the Editor Starter Template section.
• Backend Routes: related page in the Editor Starter Template section.