From bad93d1ed3dba167a1de823c56bbe71f01417a5e Mon Sep 17 00:00:00 2001 From: Kipras Melnikovas Date: Wed, 22 Jan 2025 11:23:58 +0200 Subject: [PATCH] fix: wrap function with useCallback we use it inside a useEffect dependency array, and now that it's no longer coming from `useState`, it gets reset everytime & the logic breaks. the wrapping in useCallback fixes this. --- .changeset/tame-pumas-rush.md | 5 +++++ src/components/Sidebar/SidebarContext.tsx | 5 +++-- 2 files changed, 8 insertions(+), 2 deletions(-) create mode 100644 .changeset/tame-pumas-rush.md diff --git a/.changeset/tame-pumas-rush.md b/.changeset/tame-pumas-rush.md new file mode 100644 index 0000000..c197974 --- /dev/null +++ b/.changeset/tame-pumas-rush.md @@ -0,0 +1,5 @@ +--- +"@zenml-io/react-component-library": patch +--- + +fix: wrap function with useCallback diff --git a/src/components/Sidebar/SidebarContext.tsx b/src/components/Sidebar/SidebarContext.tsx index 07592d1..5d8d3aa 100644 --- a/src/components/Sidebar/SidebarContext.tsx +++ b/src/components/Sidebar/SidebarContext.tsx @@ -3,6 +3,7 @@ import React, { PropsWithChildren, SetStateAction, createContext, + useCallback, useContext, useState } from "react"; @@ -33,7 +34,7 @@ export function SidebarProvider({ * then the sidebar gets automatically closed, instead of waiting for the user * to hover away from it before closing. */ - function setIsOpen(newValue: Setter): void { + const setIsOpen = useCallback((newValue: Setter): void => { _setIsOpen((currIsOpen) => { const value: boolean = getValueFromSetter(newValue, currIsOpen); @@ -44,7 +45,7 @@ export function SidebarProvider({ return value; }); - } + }, []); return (