update state of data after remove #4919
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe changes in the Changes
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
src/components/views/verification/SocialProfile.tsx (3)
51-52: Ensure consistency of initialization logic.Using
useMemoinsideuseStatecan be somewhat redundant becauseuseStateonly initializes once. It might be clearer to computefindSocialMedia('twitter')directly here or memoize it beforehand if there's a performance concern.- const [twitterData, setTwitterData] = useState( - useMemo(() => findSocialMedia('twitter'), [findSocialMedia]), - ); + const [twitterData, setTwitterData] = useState(() => findSocialMedia('twitter'));
55-56: Same initialization approach for LinkedIn data.As with Twitter, consider removing
useMemoin favor of a direct function call to simplify code.- const [linkedinData, setLinkedinData] = useState( - useMemo(() => findSocialMedia('linkedin'), [findSocialMedia]), - ); + const [linkedinData, setLinkedinData] = useState(() => findSocialMedia('linkedin'));
58-59: Maintain code consistency for Discord data.For readability, consider adopting the same pattern as suggested for Twitter and LinkedIn data.
- const [discordData, setDiscordData] = useState( - useMemo(() => findSocialMedia('discord'), [findSocialMedia]), - ); + const [discordData, setDiscordData] = useState(() => findSocialMedia('discord'));
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/views/verification/SocialProfile.tsx(3 hunks)
🔇 Additional comments (1)
src/components/views/verification/SocialProfile.tsx (1)
16-16: Great adoption of React hooks for state management!Importing
useState,useMemo, anduseCallbackis an appropriate step to better manage social media states.
| const stateHandlers: any = { | ||
| twitter: setTwitterData, | ||
| linkedin: setLinkedinData, | ||
| discord: setDiscordData, | ||
| }; | ||
|
|
||
| // Loop through the states to find and update the matching one | ||
| Object.keys(stateHandlers).forEach(key => { | ||
| if (id === Number(findSocialMedia(key)?.id)) { | ||
| stateHandlers[key](null); | ||
| } | ||
| }); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Avoid using any type for stateHandlers.
For better type safety, define the shape of the state handler object. This ensures that each key and value is typed, reducing potential runtime errors.
- const stateHandlers: any = {
+ interface StateHandlers {
+ twitter: React.Dispatch<React.SetStateAction<ISocialProfile | null>>;
+ linkedin: React.Dispatch<React.SetStateAction<ISocialProfile | null>>;
+ discord: React.Dispatch<React.SetStateAction<ISocialProfile | null>>;
+ }
+
+ const stateHandlers: StateHandlers = {
twitter: setTwitterData,
linkedin: setLinkedinData,
discord: setDiscordData,
};Committable suggestion skipped: line range outside the PR's diff.
#4857
Summary by CodeRabbit