Skip to content

Prevent stale content components #1477

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 23, 2025
Merged

Prevent stale content components #1477

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 30 additions & 19 deletions src/app/components/content/IsaacContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,15 +42,26 @@ export interface IsaacContentProps extends RouteComponentProps {

export const IsaacContent = withRouter((props: IsaacContentProps) => {
const {doc: {type, layout, encoding, value, children}, match} = props;
const keyedProps = {...props, key: props.doc.id};
{/*
Each IsaacContent is assumed to be independent, not sharing state with any other.
However, React will reuse components if they are the same type, have the same key (or undefined), and exist in the same place in the DOM.
If two components A and B meet these criteria, if you switch from component A to component B, any e.g. useStates in B will not
initialise as expected, but will retain stale data from A.

This is a problem for any structure where one of several <IsaacContent>s are displayed, e.g. quiz sections, tabs, ... .

To avoid this, we set the key of each <IsaacContent> to its content ID.
*/}

let selectedComponent;
let tempSelectedComponent;
if (isQuestion(props.doc)) {
// FIXME: Someday someone will remove /quiz/ and this comment too.
if (match.path.startsWith("/quiz/") || match.path.startsWith("/test/")) {
tempSelectedComponent = <QuizQuestion {...props} />;
tempSelectedComponent = <QuizQuestion {...keyedProps} />;
} else {
tempSelectedComponent = <IsaacQuestion {...props} />;
tempSelectedComponent = <IsaacQuestion {...keyedProps} />;
}

if (type === "isaacInlineRegion") {
Expand All @@ -60,25 +71,25 @@ export const IsaacContent = withRouter((props: IsaacContentProps) => {
selectedComponent = <QuestionContext.Provider value={props.doc.id}>{tempSelectedComponent}</QuestionContext.Provider>;
} else {
switch (type) {
case "figure": selectedComponent = <IsaacFigure {...props} />; break;
case "image": selectedComponent = <IsaacImage {...props} />; break;
case "video": selectedComponent = <IsaacVideo {...props} />; break;
case "codeSnippet": selectedComponent = <IsaacCodeSnippet {...props} />; break;
case "interactiveCodeSnippet": selectedComponent = <IsaacInteractiveCodeSnippet {...props} />; break;
case "glossaryTerm": selectedComponent = <IsaacGlossaryTerm {...props} />; break;
case "isaacFeaturedProfile": selectedComponent = <IsaacFeaturedProfile {...props} />; break;
case "isaacQuestion": selectedComponent = <IsaacQuickQuestion {...props} />; break;
case "anvilApp": selectedComponent = <AnvilApp {...props} />; break;
case "isaacCard": selectedComponent = <IsaacCard {...props} />; break;
case "isaacCardDeck": selectedComponent = <IsaacCardDeck {...props} />; break;
case "codeTabs": selectedComponent = <IsaacCodeTabs {...props} />; break;
case "figure": selectedComponent = <IsaacFigure {...keyedProps} />; break;
case "image": selectedComponent = <IsaacImage {...keyedProps} />; break;
case "video": selectedComponent = <IsaacVideo {...keyedProps} />; break;
case "codeSnippet": selectedComponent = <IsaacCodeSnippet {...keyedProps} />; break;
case "interactiveCodeSnippet": selectedComponent = <IsaacInteractiveCodeSnippet {...keyedProps} />; break;
case "glossaryTerm": selectedComponent = <IsaacGlossaryTerm {...keyedProps} />; break;
case "isaacFeaturedProfile": selectedComponent = <IsaacFeaturedProfile {...keyedProps} />; break;
case "isaacQuestion": selectedComponent = <IsaacQuickQuestion {...keyedProps} />; break;
case "anvilApp": selectedComponent = <AnvilApp {...keyedProps} />; break;
case "isaacCard": selectedComponent = <IsaacCard {...keyedProps} />; break;
case "isaacCardDeck": selectedComponent = <IsaacCardDeck {...keyedProps} />; break;
case "codeTabs": selectedComponent = <IsaacCodeTabs {...keyedProps} />; break;
default:
switch (layout) {
case "tabs": selectedComponent = <IsaacTabs {...props} />; break;
case isTabs(layout): selectedComponent = <IsaacTabs {...props} style={layout?.split('/')[1]} />; break;
case "callout": selectedComponent = <IsaacCallout {...props} />; break;
case "accordion": selectedComponent = <IsaacAccordion {...props} />; break;
case "horizontal": selectedComponent = <IsaacHorizontal {...props} />; break;
case "tabs": selectedComponent = <IsaacTabs {...keyedProps} />; break;
case isTabs(layout): selectedComponent = <IsaacTabs {...keyedProps} style={layout?.split('/')[1]} />; break;
case "callout": selectedComponent = <IsaacCallout {...keyedProps} />; break;
case "accordion": selectedComponent = <IsaacAccordion {...keyedProps} />; break;
case "horizontal": selectedComponent = <IsaacHorizontal {...keyedProps} />; break;
case "clearfix": selectedComponent = <>&nbsp;</>; break;
default: selectedComponent =
<IsaacContentValueOrChildren encoding={encoding} value={value}>
Expand Down
Loading