message: feat: responsive prop refactor
diff: import { useSxStyledSystemPropsResolver } from './useSxStyledSystemPropsResolver';
  import { useNativeBaseConfig } from '../../core/NativeBaseContext';
  -import { isArray } from 'lodash';
  +import { isResponsiveAnyProp } from '../../theme/tools';
  +import { useTheme } from '../useTheme';
  +import { useMemo } from 'react';
  +//@ts-ignore
  +import stableHash from 'stable-hash';
  +
  export const useSx = () => {
  const isSSR = useNativeBaseConfig('useBreakpointResolvedProps').isSSR;
  + const theme = useTheme();
  const Sx = (query: any) => {
  - if (isSSR && hasResposiveProps(query)) {
  + const StableHashQuery = stableHash(query);
  + const checkWarning = useMemo(() => {
  + return isResponsiveAnyProp(query, theme);
  + // eslint-disable-next-line react-hooks/exhaustive-deps
  + }, [StableHashQuery]);
  +
  + if (isSSR && checkWarning) {
  console.warn("useSx prop doesn't resolve responsive prop with SSR");
  }
  const resolvedStyle = useSxStyledSystemPropsResolver(query);
  @@ -12,18 +24,3 @@ export const useSx = () => {
  };
  return Sx;
  };
  -
  -// Need a Better Logic to Identify object responsive props
  -
  -/**
  - *
  - * @param query
  - * @returns Boolean
  - */
  -
  -const hasResposiveProps = (query: any) => {
  - for (const item of Object.keys(query)) {
  - if (isArray(query[item])) return true;
  - }
  - return false;
  -};
  