diff --git a/src/ResizableHeader.tsx b/src/ResizableHeader.tsx
index f4cfeba..8a73933 100644
--- a/src/ResizableHeader.tsx
+++ b/src/ResizableHeader.tsx
@@ -32,7 +32,7 @@ const AntdResizableHeader: React.FC<ComponentProp> = (props) => {
 
   const [resizeWidth, setResizeWidth] = React.useState<number>(0);
 
-  React.useLayoutEffect(() => {
+  React.useEffect(() => {
     if (width && !isLast) {
       const domWidth = thRef.current?.getBoundingClientRect().width || width;
       const w = domWidth > width ? domWidth : width;
@@ -41,7 +41,7 @@ const AntdResizableHeader: React.FC<ComponentProp> = (props) => {
     }
   }, [triggerMount]);
 
-  React.useLayoutEffect(() => {
+  React.useEffect(() => {
     if (width) {
       setResizeWidth(width);
     }
diff --git a/src/index.tsx b/src/index.tsx
index bac3f9c..ca6f280 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -30,11 +30,11 @@ function useTableResizableHeader<ColumnType extends Record<string, any>>(
 
   const onResize = onMount;
 
-  React.useLayoutEffect(() => {
+  React.useEffect(() => {
     forceRender();
   }, [columns]);
 
-  React.useLayoutEffect(() => {
+  React.useEffect(() => {
     const t = columns?.map((col, index) => {
       const isLast = index === columns.length - 1;
       return {
@@ -54,7 +54,7 @@ function useTableResizableHeader<ColumnType extends Record<string, any>>(
     setResizableColumns(t);
   }, [triggerMount]);
 
-  React.useLayoutEffect(() => {
+  React.useEffect(() => {
     window.addEventListener('resize', forceRender);
     return () => {
       window.removeEventListener('resize', forceRender);