« first day (4383 days earlier)      last day (787 days later) » 

14:53
Hello
import { useEffect, useState } from 'react'
import { debounce } from './debounce'
type WindowsProps = {
  width: number
  height: number
}

export const useWindowSize = () => {
  const [windowSize, setWindowSize] = useState<WindowsProps>({
    width: 0,
    height: 0,
  } as WindowsProps)

  const debouncedResize = () =>
    debounce(() => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      })
    }, 100)()

  useEffect(() => {
    setWindowSize({
Why this code is not executed again and again when I resize the window ?
but only first time
  const [width] = useWindowSize()

  // >= 992px
  const largeScreen = width >= screenSize.lg

  console.log('width', width)
  console.log('large screen', largeScreen)
I am expecting to log width after 1 second , but it's not working
it's impossible to use dependency here , because that will kill performance
 
3 hours later…
17:36
@MileMijatović the debounceResize function refers to the closure for the window variable that was created when the useEffect first ran. Every time you resize it is using that closure's value
which never changes
so it's repeatedly setting the same value
17:51
You are right
How to change , do you have suggestion ?
I think you can use this - npmjs.com/package/use-debounce
It's not allowed to use additional npm package
for debounce
I am debugging, and here

    debounce(() => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      })
    }, 100)()
I am getting updated resized value
but how to pass that value to windowSize.width ?
Is that possible ?
@Abhi Please don't post unformatted code - use the up arrow to edit your post, then hit Ctrl + K to format the code in that post. See the faq. You have 25 seconds to edit and format your message properly before it will be removed. Please separate code blocks from your actual question. Put your question in 1 message and then your code in a 2nd and format it.
1 message moved to Trash can
@Abhi Please don't post unformatted code - use the up arrow to edit your post, then hit Ctrl + K to format the code in that post. See the faq. You have 25 seconds to edit and format your message properly before it will be removed. Please separate code blocks from your actual question. Put your question in 1 message and then your code in a 2nd and format it.
useEffect(() => {
ref.current = {width: window.innerWidth, height: ....}
}, [window.innerWidth, window.innerHeight])
```
17:58
reference is window in my case
@MileMijatović I didn't understand
@MileMijatović where do you mean exactly?
I am not sure how to explain
Where to add ref
18:26
@MileMijatović i meant a useRef
Yes, I know
But where to apply ref={ref} ?
because my reference is window, not div or something else
Do you understand ?
Is it possible to use outer method logic to update the state ?
 
2 hours later…
20:53
I am trying to wrap method with useCallback
But I am getting an error
error Assignments to the 'documentToOpen' variable from inside React Hook useCallback will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property.
then I defined useRef , but TS complaining
  let documentRef = useRef<JSX.Element>(null)

  const openDocument = useCallback(
    (document: string) => {
      setDisplayInfo({ displayConfirm: false, displayCancel: false })

      switch (document) {
        case DocumentsEnum.TERMS_OF_USE:
          documentRef = <TermsOfUse />
          break
        case DocumentsEnum.PRIVACY_POLICY:
          documentRef = <PrivacyPolicy />
          break
      }

      setContent({
        contentElement: documentRef,
        title: (
          <div className="py-3">
Property 'current' is missing in type 'ReactElement<any, any>' but required in type 'RefObject<Element>'.
What's wrong here ?
21:15
Pretty much what the previous and this error tell you to do. documentRef is the reference, documentRef.current is the property which should contain your element
const documentRef = useRef<JSX.Element>(null) and use documentRef.current instead of documentRef. Not sure if it's a good idea to create and assign a ReactElement inside a callback.. might blow up, not sure tho

« first day (4383 days earlier)      last day (787 days later) »