@scality/core-ui 0.162.0 → 0.164.0

package/src/lib/components/selectv2/selectv2.test.tsx

@@ -1,15 +1,11 @@
-import { screen, render as testingRender } from '@testing-library/react';
+import { act, screen, render as testingRender, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React, { useState, useRef } from 'react';
-import { QueryClient, QueryClientProvider } from 'react-query';
 import { Option, Select, SelectRef } from '../selectv2/Selectv2.component';
+import { GroupTypeBase, OptionTypeBase } from 'react-select';
 
 const render = (args) => {
-  return testingRender(
-    <QueryClientProvider client={new QueryClient()}>
-      {args}
-    </QueryClientProvider>,
-  );
+  return testingRender(args);
 };
 
 const generateOptionsData = (n: number) =>
@@ -71,30 +67,35 @@ describe('SelectV2', () => {
   };
 
   it('should throw error if <Option/> is outside <Select/>', () => {
+    // mock console.error as this is the only way to silent expected error thrown by the component
+    const consoleErrorFn = jest.spyOn(console, 'error').mockImplementation(() => jest.fn());
     expect(() => render(<Option value="Option 1" />)).toThrowError();
+    consoleErrorFn.mockRestore();
   });
 
-  it('should open/close on click', () => {
+  it('should open/close on click', async () => {
     render(<SelectWrapper />);
+    await waitFor(() => screen.queryAllByRole('img', { hidden: true }));
     const select = selectors.select();
     expect(select).toBeInTheDocument();
     let options = selectors.options();
     expect(options).toHaveLength(0);
 
     // should open on click
-    userEvent.click(select);
+    await act(() => userEvent.click(select));
     simpleOptions.forEach((opt) => {
       const option = selectors.option(opt.props.label);
       expect(option).toBeInTheDocument();
     });
 
-    userEvent.click(select);
+    await act(() => userEvent.click(select));
     options = selectors.options();
     expect(options).toHaveLength(0);
   });
 
-  it('should open/close with keyboard', () => {
+  it('should open/close with keyboard', async () => {
     render(<SelectWrapper />);
+    await waitFor(() => screen.queryAllByRole('img', { hidden: true }));
     const select = selectors.select();
     expect(select).toBeInTheDocument();
     const options = selectors.options();
@@ -102,7 +103,7 @@ describe('SelectV2', () => {
 
     // should open on Enter
     userEvent.tab();
-    userEvent.keyboard('{Enter}');
+    await act(() => userEvent.keyboard('{Enter}'));
     simpleOptions.forEach((opt) => {
       const option = selectors.option(opt.props.label);
       expect(option).toBeInTheDocument();
@@ -121,13 +122,14 @@ describe('SelectV2', () => {
     });
   });
 
-  it('should display custom placeholder', () => {
+  it('should display custom placeholder', async () => {
     const placeholder = 'My placeholder...';
     render(<SelectWrapper placeholder={placeholder} />);
+    await waitFor(() => screen.queryAllByRole('img', { hidden: true }));
     expect(screen.getByText(placeholder)).toBeInTheDocument();
   });
 
-  it('should be disabled', () => {
+  it('should be disabled', async () => {
     render(
       <SelectWrapper value="1" disabled={true}>
         {simpleOptions}
@@ -139,27 +141,29 @@ describe('SelectV2', () => {
     // use input instead of select because select will still trigger the open/close action
     // despite select container not being clickable and input being disabled
     const input = selectors.input();
-    userEvent.click(input);
+    await act(() => userEvent.click(input));
     const options = selectors.options();
     expect(options).toHaveLength(0);
   });
 
-  it('should display no option', () => {
+  it('should display no option', async () => {
     render(
       <SelectWrapper>
         <></>
       </SelectWrapper>,
     );
+    await waitFor(() => screen.queryAllByRole('img', { hidden: true }));
     const select = selectors.select();
-    userEvent.click(select);
+    await act(() => userEvent.click(select));
     const noOptions = selectors.noOptions();
     expect(noOptions).toBeInTheDocument();
   });
 
-  it('should filter and highlight on search', () => {
+  it('should filter and highlight on search', async () => {
     render(<SelectWrapper>{optionsWithScrollSearchBar} </SelectWrapper>);
+    await waitFor(() => screen.queryAllByRole('img', { hidden: true }));
     const select = selectors.select(true);
-    userEvent.click(select);
+    await act(() => userEvent.click(select));
     const input = selectors.input();
 
     userEvent.type(input, '2');
@@ -169,25 +173,26 @@ describe('SelectV2', () => {
     expect(searchedText).toHaveTextContent('2');
   });
 
-  it('should unfocus the search input when the select is closed', () => {
+  it('should unfocus the search input when the select is closed', async () => {
     render(<SelectWrapper>{optionsWithScrollSearchBar} </SelectWrapper>);
+    await waitFor(() => screen.queryAllByRole('img', { hidden: true }));
     const select = selectors.select(true);
-    userEvent.click(select);
+    await act(() => userEvent.click(select));
     let input = selectors.input();
     expect(input).toHaveFocus();
     const option = selectors.option(/Item 1/);
-    userEvent.click(option);
+    await act(() => userEvent.click(option));
     input = selectors.input();
     expect(input).not.toHaveFocus();
   });
 
-  it('should be possible to use searchbar when option is selected', () => {
+  it('should be possible to use searchbar when option is selected', async () => {
     render(
       <SelectWrapper value="1">{optionsWithScrollSearchBar}</SelectWrapper>,
     );
     expect(screen.getByText(/Item 1/)).toBeVisible();
     const select = selectors.select(true);
-    userEvent.click(select);
+    await act(() => userEvent.click(select));
     const input = selectors.input();
     userEvent.type(input, '2');
     expect(screen.queryByText(/Item 1/)).not.toBeInTheDocument();
@@ -195,47 +200,48 @@ describe('SelectV2', () => {
     expect(options).toHaveLength(1);
   });
 
-  it('should select/unselect option with keyboard', () => {
+  it('should select/unselect option with keyboard', async () => {
     render(<SelectWrapper />);
+    await waitFor(() => screen.queryAllByRole('img', { hidden: true }));
     const select = selectors.select();
     userEvent.tab();
-    userEvent.keyboard('{ArrowDown}');
+    act(() => userEvent.keyboard('{ArrowDown}'));
 
     // should select first option
-    userEvent.keyboard('{Enter}');
+    await act(() => userEvent.keyboard('{Enter}'));
     expect(select).toHaveTextContent('Item 0');
 
     // should select second option
     userEvent.tab();
-    userEvent.keyboard('{ArrowDown}');
-    userEvent.keyboard('{ArrowDown}');
+    await act(() => userEvent.keyboard('{ArrowDown}'));
+    await act(() => userEvent.keyboard('{ArrowDown}'));
 
-    userEvent.keyboard('{Enter}');
+    await act(() => userEvent.keyboard('{Enter}'));
     expect(select).toHaveTextContent('Item 1');
   });
 
-  it('should scroll to selected value when opening select', () => {
+  it('should scroll to selected value when opening select', async () => {
     render(
       <SelectWrapper value={optionsWithScrollSearchBar[9].props.value}>
         {optionsWithScrollSearchBar}
       </SelectWrapper>,
     );
     const select = selectors.select(true);
-    userEvent.click(select);
+    await act(() => userEvent.click(select));
     const option = selectors.option(/Item 9/);
     expect(screen.queryByRole('option', { name: /Item 1/i })).toBeNull();
     expect(option).toBeVisible();
   });
 
-  it('should be able to reset the value', () => {
+  it('should be able to reset the value', async () => {
     render(<SelectReset>{simpleOptions}</SelectReset>);
     const button = screen.getByText(/reset/);
-    userEvent.click(button);
+    await act(() => userEvent.click(button));
     const select = selectors.select();
     expect(select).toHaveTextContent('Select...');
   });
 
-  it('should not be possible to select an option if it is disabled', () => {
+  it('should not be possible to select an option if it is disabled', async () => {
     render(
       <SelectWrapper>
         <Option value="1" disabled>
@@ -245,15 +251,15 @@ describe('SelectV2', () => {
       </SelectWrapper>,
     );
     const select = selectors.select();
-    userEvent.click(select);
+    await act(() => userEvent.click(select));
     const option = selectors.option(/Item 1/);
 
-    userEvent.click(option);
+    await act(() => userEvent.click(option));
     const option2 = selectors.option(/Item 2/);
     expect(option2).toBeVisible();
   });
 
-  it('should display a tooltip if the option is disabled with a reason', () => {
+  it('should display a tooltip if the option is disabled with a reason', async () => {
     render(
       <SelectWrapper>
         <Option value="1" disabled disabledReason="This option is disabled">
@@ -262,10 +268,10 @@ describe('SelectV2', () => {
       </SelectWrapper>,
     );
     const select = selectors.select();
-    userEvent.click(select);
+    await act(() => userEvent.click(select));
     const option = selectors.option(/Item 1/);
     expect(option).toHaveAttribute('aria-disabled', 'true');
-    userEvent.hover(option);
+    await act(() => userEvent.hover(option));
     const tooltip = screen.getByText(/This option is disabled/);
     expect(tooltip).toBeInTheDocument();
   });
@@ -309,9 +315,9 @@ describe('SelectV2', () => {
     // It's not our case here, so it makes thing difficult to select the right select
     // I workaround this by using setting the aria-label to the select container (cf: test below)
     const singleSelect = screen.getByRole('listbox');
-    await userEvent.click(singleSelect);
+    await act(() => userEvent.click(singleSelect));
 
-    await userEvent.click(screen.getByRole('option', { name: /account 1/i }));
+    await act(() => userEvent.click(screen.getByRole('option', { name: /account 1/i })));
   });
 
   it('should be testable if we have several select', async () => {
@@ -372,13 +378,13 @@ describe('SelectV2', () => {
 
     render(<MyWrapperWith2Select />);
 
-    await userEvent.click(screen.getByLabelText(/select account/i));
+    await act(() => userEvent.click(screen.getByLabelText(/select account/i)));
 
-    await userEvent.click(screen.getByRole('option', { name: /account 1/i }));
+    await act(() => userEvent.click(screen.getByRole('option', { name: /account 1/i })));
 
-    await userEvent.click(screen.getByLabelText(/select user/i));
+    await act(() => userEvent.click(screen.getByLabelText(/select user/i)));
 
-    await userEvent.click(screen.getByRole('option', { name: /user 1/i }));
+    await act(() => userEvent.click(screen.getByRole('option', { name: /user 1/i })));
   });
 
   it('should be testable even if we have several select with the same value, the placeholder should be different', async () => {
@@ -439,8 +445,8 @@ describe('SelectV2', () => {
 
     render(<MyWrapperWith2Select />);
 
-    await userEvent.click(screen.getByLabelText(/select account/i));
-    await userEvent.click(screen.getByLabelText(/Select Second Account/i));
+    await act(() => userEvent.click(screen.getByLabelText(/select account/i)));
+    await act(() => userEvent.click(screen.getByLabelText(/Select Second Account/i)));
 
     /**
      * This is possible because only 1 select can be open at a time
@@ -450,13 +456,13 @@ describe('SelectV2', () => {
      * const selectContainer = select?.parentElement?.parentElement;
      * const option = within(selectContainer).getByRole('option', { name: /account 1/i });
      */
-    await userEvent.click(screen.getByRole('option', { name: /account 1/i }));
+    await act(() => userEvent.click(screen.getByRole('option', { name: /account 1/i })));
   });
 
   describe('Ref API', () => {
     it('should expose focus method via ref', async () => {
       const RefTestComponent = () => {
-        const selectRef = useRef<SelectRef>(null);
+        const selectRef = useRef<SelectRef<OptionTypeBase, boolean, GroupTypeBase<OptionTypeBase>>>(null);
         const [value, setValue] = useState<string>('');
 
         return (
@@ -478,13 +484,13 @@ describe('SelectV2', () => {
       render(<RefTestComponent />);
       expect(selectors.input()).not.toHaveFocus();
 
-      userEvent.click(screen.getByRole('button', { name: /Focus/i }));
+      await act(() => userEvent.click(screen.getByRole('button', { name: /Focus/i })));
       expect(selectors.input()).toHaveFocus();
     });
 
     it('should expose openMenu and closeMenu methods via ref', async () => {
       const RefTestComponent = () => {
-        const selectRef = useRef<SelectRef>(null);
+        const selectRef = useRef<SelectRef<OptionTypeBase, boolean, GroupTypeBase<OptionTypeBase>>>(null);
         const [value, setValue] = useState<string>('');
 
         return (
@@ -511,14 +517,14 @@ describe('SelectV2', () => {
       render(<RefTestComponent />);
       expect(selectors.options()).toHaveLength(0);
 
-      userEvent.click(screen.getByRole('button', { name: /Open Menu/i }));
+      await act(() => userEvent.click(screen.getByRole('button', { name: /Open Menu/i })));
       expect(selectors.options().length).toBeGreaterThan(0);
       simpleOptions.forEach((opt) => {
         const option = selectors.option(opt.props.label);
         expect(option).toBeInTheDocument();
       });
 
-      userEvent.click(screen.getByRole('button', { name: /Close Menu/i }));
+      await act(() => userEvent.click(screen.getByRole('button', { name: /Close Menu/i })));
       expect(selectors.options()).toHaveLength(0);
     });
 
@@ -527,7 +533,7 @@ describe('SelectV2', () => {
 
       const RefTestComponent = () => {
         const [value, setValue] = useState('');
-        const selectRef = useRef<SelectRef>(null);
+        const selectRef = useRef<SelectRef<OptionTypeBase, boolean, GroupTypeBase<OptionTypeBase>>>(null);
 
         return (
           <div>
@@ -565,19 +571,22 @@ describe('SelectV2', () => {
 
       render(<RefTestComponent />);
 
-      const select = selectors.select();
+      let select;
+      await act(() => {
+        select = selectors.select();
+      });
       expect(select).toHaveTextContent('Select with ref');
 
-      userEvent.click(screen.getByRole('button', { name: /Set Value/i }));
+      await act(() => userEvent.click(screen.getByRole('button', { name: /Set Value/i })));
       expect(select).toHaveTextContent('Item 0');
 
-      userEvent.click(screen.getByRole('button', { name: /Clear/i }));
+      await act(() => userEvent.click(screen.getByRole('button', { name: /Clear/i })));
       expect(select).toHaveTextContent('Select with ref');
     });
 
     it('should expose blur method via ref', async () => {
       const RefTestComponent = () => {
-        const selectRef = useRef<SelectRef>(null);
+        const selectRef = useRef<SelectRef<OptionTypeBase, boolean, GroupTypeBase<OptionTypeBase>>>(null);
         const [value, setValue] = useState<string>('');
 
         return (
@@ -599,10 +608,10 @@ describe('SelectV2', () => {
 
       render(<RefTestComponent />);
 
-      userEvent.click(screen.getByRole('button', { name: /Focus/i }));
+      await act(() => userEvent.click(screen.getByRole('button', { name: /Focus/i })));
       expect(selectors.input()).toHaveFocus();
 
-      userEvent.click(screen.getByRole('button', { name: /Blur/i }));
+      await act(() => userEvent.click(screen.getByRole('button', { name: /Blur/i })));
       expect(selectors.input()).not.toHaveFocus();
     });
   });

package/src/lib/components/steppers/Stepper.component.tsx

@@ -1,5 +1,5 @@
 /// <reference path="./Stepper.component.d.ts" />
-import { createContext, useContext, useState } from 'react';
+import { createContext, useContext, useState, useCallback, useMemo } from 'react';
 import { Steppers } from './Steppers.component';
 import { Box } from '../box/Box';
 export interface StepperContextType {
@@ -33,19 +33,21 @@ export const Stepper: Stepper = ({ steps }) => {
     props: Record<string, unknown>;
   }>({ step: 0, props: {} });
 
-  const next = (props: Record<string, unknown>) => {
-    setStepProps({ step: stepProps.step + 1, props });
-  };
+  const next = useCallback((props: Record<string, unknown>) => {
+    setStepProps(current => ({ step: current.step + 1, props }));
+  }, []);
 
-  const prev = (props: Record<string, unknown>) => {
-    setStepProps({ step: stepProps.step - 1, props });
-  };
+  const prev = useCallback((props: Record<string, unknown>) => {
+    setStepProps(current => ({ step: current.step - 1, props }));
+  }, []);
 
   const { Component } = steps[stepProps.step];
   const StepperContext = window.StepperContext;
 
+  const stepperValue = useMemo(() => ({ next, prev }), [next, prev]);
+
   return (
-    <StepperContext.Provider value={{ next, prev }}>
+    <StepperContext.Provider value={stepperValue}>
       <Box display="flex" gap={32} flex={1} height="100%">
         <Steppers
           activeStep={stepProps.step}

package/src/lib/components/tablev2/TableSync.test.tsx

@@ -1,31 +1,27 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { TableSync } from './TableSync';
-import { QueryClient, QueryClientProvider } from 'react-query';
 
 describe('TableSync', () => {
-  it('should render correctly', () => {
+  it('should render correctly', async () => {
     const onSync = jest.fn();
     render(
-      <QueryClientProvider client={new QueryClient()}>
-        <TableSync onSync={onSync} />
-      </QueryClientProvider>,
+      <TableSync onSync={onSync} tooltipOverlay='sync' />
     );
+    await waitFor(() => screen.queryAllByRole('img', { hidden: true }));
 
     const button = screen.getByRole('button');
     expect(button).toBeInTheDocument();
   });
 
-  it('should call onSync when clicked', () => {
+  it('should call onSync when clicked', async () => {
     const onSync = jest.fn();
     render(
-      <QueryClientProvider client={new QueryClient()}>
-        <TableSync onSync={onSync} />
-      </QueryClientProvider>,
+      <TableSync onSync={onSync} tooltipOverlay='sync' />
     );
+    await waitFor(() => screen.queryAllByRole('img', { hidden: true }));
 
     const button = screen.getByRole('button');
-    fireEvent.click(button);
+    await act(() => fireEvent.click(button));
     expect(onSync).toHaveBeenCalledTimes(1);
   });
 });

package/src/lib/components/tablev2/TableUtils.test.ts

@@ -9,9 +9,12 @@ it('should return -1 or 1 to sort the status', () => {
   expect(result).toEqual(1);
   expect(result2).toEqual(-1);
 });
-it('should return undefine for the unknown status', () => {
-  const result = compareHealth('invalidStatus', 'healthy');
-  const result2 = compareHealth('none', 'invalidStatus');
+it('should return undefined for the unknown status', () => {
+  const consoleErrorMockHandle = jest.spyOn(console, 'error').mockImplementation(() => {});
+  const result = compareHealth('invalidStatus' as any, 'healthy');
+  const result2 = compareHealth('none', 'invalidStatus' as any);
+  expect(consoleErrorMockHandle).toHaveBeenCalled();
+  consoleErrorMockHandle.mockRestore();
   expect(result).toEqual(undefined);
   expect(result2).toEqual(undefined);
 });

package/src/lib/components/tablev2/Tablev2.test.tsx

@@ -1,7 +1,5 @@
-import { Table } from './Tablev2.component';
-import React from 'react';
-import { render } from '@testing-library/react';
-import { QueryClient, QueryClientProvider } from 'react-query';
+import { Table, TableProps } from './Tablev2.component';
+import { render, screen, waitFor } from '@testing-library/react';
 
 jest.mock('./TableUtils', () => ({
   ...jest.requireActual('./TableUtils'),
@@ -43,7 +41,7 @@ const data = [
     health: 'healthy',
   },
 ];
-const columns = [
+const columns: TableProps['columns'] = [
   {
     Header: 'First Name',
     accessor: 'firstName',
@@ -66,17 +64,17 @@ const columns = [
 describe('TableV2', () => {
   test('it should display all the data', async () => {
     const { getAllByRole } = render(
-      <QueryClientProvider client={new QueryClient()}>
-        <div>
-          <Table columns={columns} data={data} defaultSortingKey={'health'}>
-            <Table.SingleSelectableContent
-              rowHeight="h40"
-              separationLineVariant="backgroundLevel3"
-            />
-          </Table>
-        </div>
-      </QueryClientProvider>,
+      <div>
+        <Table columns={columns} data={data} defaultSortingKey={'health'}>
+          <Table.SingleSelectableContent
+            rowHeight="h40"
+            separationLineVariant="backgroundLevel3"
+          />
+        </Table>
+      </div>
     );
+    await waitFor(() => screen.queryAllByRole('img', { hidden: true }));
+
     // we check that the table is displaying all the data
     const rows = getAllByRole('row');
     expect(rows[4]).toHaveTextContent(/Ninette/i);
@@ -85,17 +83,17 @@ describe('TableV2', () => {
   });
   test('it should sort by defaultSortingKey', async () => {
     const { getAllByRole } = render(
-      <QueryClientProvider client={new QueryClient()}>
-        <div>
-          <Table columns={columns} data={data} defaultSortingKey={'firstName'}>
-            <Table.SingleSelectableContent
-              rowHeight="h40"
-              separationLineVariant="backgroundLevel3"
-            />
-          </Table>
-        </div>
-      </QueryClientProvider>,
+      <div>
+        <Table columns={columns} data={data} defaultSortingKey={'firstName'}>
+          <Table.SingleSelectableContent
+            rowHeight="h40"
+            separationLineVariant="backgroundLevel3"
+          />
+        </Table>
+      </div>
     );
+    await waitFor(() => screen.queryAllByRole('img', { hidden: true }));
+
     // we check that the table is displaying all the data
     const rows = getAllByRole('row');
     expect(rows[1]).toHaveTextContent(/ninette/i);
@@ -104,22 +102,22 @@ describe('TableV2', () => {
   });
   test('it should filterGlobally', async () => {
     const { getAllByRole } = render(
-      <QueryClientProvider client={new QueryClient()}>
-        <div>
-          <Table
-            columns={columns}
-            data={data}
-            defaultSortingKey={'firstName'}
-            globalFilter="an"
-          >
-            <Table.SingleSelectableContent
-              rowHeight="h40"
-              separationLineVariant="backgroundLevel3"
-            />
-          </Table>
-        </div>
-      </QueryClientProvider>,
+      <div>
+        <Table
+          columns={columns}
+          data={data}
+          defaultSortingKey={'firstName'}
+          globalFilter="an"
+        >
+          <Table.SingleSelectableContent
+            rowHeight="h40"
+            separationLineVariant="backgroundLevel3"
+          />
+        </Table>
+      </div>
     );
+    await waitFor(() => screen.queryAllByRole('img', { hidden: true }));
+
     // we check that the table is displaying all the data
     const rows = getAllByRole('row');
     expect(rows[1]).toHaveTextContent(/an/i); //first name yoh-an-n

package/src/lib/components/toast/ToastProvider.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, createContext, useContext, useState } from 'react';
+import { ReactNode, createContext, useCallback, useContext, useMemo, useState } from 'react';
 import { Toast, ToastProps } from './Toast.component';
 
 export type ToastContextState = Omit<ToastProps, 'onClose'>;
@@ -14,20 +14,27 @@ export const ToastContext = createContext<ToastContextType | undefined>(
 interface ToastProviderProps {
   children: ReactNode;
 }
+
 export const ToastProvider: React.FC<
   React.PropsWithChildren<ToastProviderProps>
 > = ({ children }) => {
   const [toastProps, setToastProps] = useState<ToastContextState | null>(null);
 
-  const showToast = (toastProps: ToastContextState) => {
-    setToastProps(toastProps);
-  };
+  const toastCtxValue = useMemo(
+    () => ({ showToast: setToastProps }),
+    [],
+  );
+
+  const closeToast = useCallback(
+    () => setToastProps(null),
+    []
+  );
 
   return (
-    <ToastContext.Provider value={{ showToast }}>
+    <ToastContext.Provider value={toastCtxValue}>
       {children}
       {toastProps && (
-        <Toast {...toastProps} onClose={() => setToastProps(null)} />
+        <Toast {...toastProps} onClose={closeToast} />
       )}
     </ToastContext.Provider>
   );
@@ -38,5 +45,6 @@ export const useToast = () => {
   if (!context) {
     throw new Error('useToast must be used within a ToastProvider');
   }
+
   return context;
 };

package/src/lib/components/toggle/Toggle.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Props, Toggle } from './Toggle.component';
 import userEvent from '@testing-library/user-event';
 

package/src/lib/components/vegachartv2/SyncedCursorCharts.tsx

@@ -1,4 +1,4 @@
-import { useState, createContext, useContext } from 'react';
+import { useState, createContext, useContext, useMemo, useCallback } from 'react';
 export const SyncedCursorChartsContext = createContext<{
   cursorX: number;
   setCursorX: (cursorX: number) => void;
@@ -17,13 +17,11 @@ export const useCursorX = (): {
 };
 export function SyncedCursorCharts({ children }: { children: JSX.Element }) {
   const [cursorX, setCursorX] = useState(0);
+
+  const contextValue = useMemo(() => ({cursorX, setCursorX}), [cursorX]);
+
   return (
-    <SyncedCursorChartsContext.Provider
-      value={{
-        cursorX,
-        setCursorX,
-      }}
-    >
+    <SyncedCursorChartsContext.Provider value={contextValue}>
       {children}
     </SyncedCursorChartsContext.Provider>
   );