Fix: Adjust indent size when screen width less than 768

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
thread-gpt	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Mar 12, 2023 at 5:06AM (UTC)

[fResult]

I have the code below.

function useThreadIndent(): { [P in keyof IndentSizes]: `${number}${CssUnit}` } {
  const { isMobile } = useScreenSize()

  const getIndentSize = useCallback(() => {
    return {
      iconSize: isMobile ? ICON_SIZE / 2 : ICON_SIZE,
      margin: isMobile ? (INDENT_SIZE / 2) : INDENT_SIZE,
    }
  }, [isMobile])

  const [{ iconSize, margin }, setIndent] = useState<IndentSizes>(getIndentSize())

  useEffect(() => {
    console.log('useEffect', isMobile)
    setIndent(getIndentSize())
  }, [isMobile])

  return {
    iconSize: `${iconSize}px`,
    margin: `${margin}px`,
  }
}

export default useThreadIndent

Every time I resized through 768px I got many re-rendered. Do you know how I can fix it? (I think it should be rendered only when isMobile change value.)

[dtinth]

If there are 50 <Indent /> components on the page, then there are 50 copies of the hook.

[fResult]

If there are 50 <Indent /> components on the page, then there are 50 copies of the hook.

Ahaaaa, I see it. thx krub.