feat: migrate some hooks to usehooks-ts

[bigint]

• chore: use useUpdateEffect
• chore: migrate useDebounce to usehooks-ts
• chore: migrate useOnClickOutside to usehooks-ts
• chore: migrate useIsMounted to usehooks-ts

What does this PR do?

🤖 Generated by Copilot at cc1e8cd

This pull request replaces several custom or built-in React hooks with hooks from the usehooks-ts library in various components of the web app. This improves the performance, logic, and functionality of the components by avoiding unnecessary or erroneous effects on the initial render. It also simplifies the code and reduces code duplication. The usehooks-ts dependency is added to the package.json file.

Related issues

Fixes # (issue)

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Enhancement (non-breaking small changes to existing functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

Explanation of the changes

🤖 Generated by Copilot at cc1e8cd

• Replace custom useEffect hook with useUpdateEffect hook from usehooks-ts library to avoid running callbacks on initial render and handle dependencies automatically (link,link,link,link,link,link,link,link,link,link,link,link,link,link,link,link,link,link,link,link,link,link,link,link,link,link,link,link,link,link,link,link,link)
• Replace custom useIsMounted hook with useIsMounted hook from usehooks-ts library to check mount status of components with a function instead of an object (link,link,link,link,link,link,link)
• Replace custom useOnClickOutside hook with useOnClickOutside hook from usehooks-ts library to handle click outside events with better compatibility and edge cases (link,link,link,link)
• Replace custom useDebounce hook with useDebounce hook from usehooks-ts library to debounce values with better performance and edge cases (link,link,link,link,link,link,link)
• Replace custom useWindowSize hook with useWindowSize hook from usehooks-ts library to get window size with better performance and edge cases (link,link)
• Add usehooks-ts dependency to package.json file to use custom React hooks from this library (link)
• Remove eslint-disable-next-line react-hooks/exhaustive-deps comment from useEffect hooks that are replaced by useUpdateEffect hooks, as they are no longer needed (link,link)
• Remove empty line from ViewProfile component for better code style and readability (link)
• Add alert statement to useUpdateEffect hook in Attachments component, which is probably a debugging statement that should be removed before merging (link)

Emoji

🪝🚀🧹

[vercel]

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

Name	Status	Preview	Updated (UTC)
prerender	✅ Ready (Inspect)	Visit Preview	May 31, 2023 1:15pm
web	✅ Ready (Inspect)	Visit Preview	May 31, 2023 1:15pm