From 7f20da051028440722b9e743910a27049a83ecb5 Mon Sep 17 00:00:00 2001 From: Tilman Vatteroth Date: Sat, 8 Apr 2023 19:35:20 +0200 Subject: [PATCH] fix: use callback hook in checkbox editor component to cache function Signed-off-by: Tilman Vatteroth --- .../task-list/set-checkbox-in-cheatsheet.tsx | 29 ++++++++++++------- 1 file changed, 18 insertions(+), 11 deletions(-) diff --git a/frontend/src/extensions/extra-integrations/task-list/set-checkbox-in-cheatsheet.tsx b/frontend/src/extensions/extra-integrations/task-list/set-checkbox-in-cheatsheet.tsx index 3a31e6dda..905991aad 100644 --- a/frontend/src/extensions/extra-integrations/task-list/set-checkbox-in-cheatsheet.tsx +++ b/frontend/src/extensions/extra-integrations/task-list/set-checkbox-in-cheatsheet.tsx @@ -10,22 +10,29 @@ import type { TaskCheckedEventPayload } from './event-emitting-task-list-checkbo import { findCheckBox } from './find-check-box' import { TaskListCheckboxAppExtension } from './task-list-checkbox-app-extension' import type React from 'react' +import { useCallback } from 'react' /** * Receives task-checkbox-change events and modify the current editor content. */ export const SetCheckboxInCheatsheet: React.FC = ({ setContent }) => { - useExtensionEventEmitterHandler(TaskListCheckboxAppExtension.EVENT_NAME, (event: TaskCheckedEventPayload) => { - setContent((previousContent) => { - return findCheckBox(previousContent, event.lineInMarkdown) - .map( - ([startIndex, endIndex]) => - previousContent.slice(0, startIndex) + - createCheckboxContent(event.newCheckedState) + - previousContent.slice(endIndex) + useExtensionEventEmitterHandler( + TaskListCheckboxAppExtension.EVENT_NAME, + useCallback( + (event: TaskCheckedEventPayload) => { + setContent((previousContent) => + findCheckBox(previousContent, event.lineInMarkdown) + .map( + ([startIndex, endIndex]) => + previousContent.slice(0, startIndex) + + createCheckboxContent(event.newCheckedState) + + previousContent.slice(endIndex) + ) + .orElse(previousContent) ) - .orElse(previousContent) - }) - }) + }, + [setContent] + ) + ) return null }