diff --git a/src/packages/col/col.tsx b/src/packages/col/col.tsx
index f918b6a6e6..36fecbbdd8 100644
--- a/src/packages/col/col.tsx
+++ b/src/packages/col/col.tsx
@@ -27,8 +27,6 @@ export const Col: FunctionComponent<
       ...defaultProps,
       ...props,
     }
-  const [colName, setColName] = useState('')
-  const [colStyle, setColStyle] = useState({})
   const { gutter } = useContext(DataContext) as any
 
   const classs = () => {
@@ -49,6 +47,8 @@ export const Col: FunctionComponent<
     }
     return style
   }
+  const [colName, setColName] = useState(classs())
+  const [colStyle, setColStyle] = useState(getStyle())
   useEffect(() => {
     setColName(classs)
     setColStyle(getStyle)