korbit-ai[bot] commented on code in PR #34687:
URL: https://github.com/apache/superset/pull/34687#discussion_r2275624607
##########
superset-frontend/src/dashboard/components/SliceHeader/index.tsx:
##########
@@ -200,20 +200,20 @@ const SliceHeader = forwardRef<HTMLDivElement,
SliceHeaderProps>(
const canExplore = !editMode && supersetCanExplore;
- useEffect(() => {
- const headerElement = headerRef.current;
+ const tooltipContent = useMemo(() => {
if (canExplore) {
- setHeaderTooltip(getSliceHeaderTooltip(sliceName));
- } else if (
- headerElement &&
- (headerElement.scrollWidth > headerElement.offsetWidth ||
- headerElement.scrollHeight > headerElement.offsetHeight)
- ) {
- setHeaderTooltip(sliceName ?? null);
- } else {
- setHeaderTooltip(null);
+ return getSliceHeaderTooltip(sliceName);
}
- }, [sliceName, width, height, canExplore]);
+ return sliceName ?? null;
+ }, [canExplore, sliceName]);
Review Comment:
### Unnecessary Memoization of Simple Value <sub></sub>
<details>
<summary>Tell me more</summary>
###### What is the issue?
The useMemo hook is being used for a simple conditional return that doesn't
involve expensive computations.
###### Why this matters
Using useMemo for simple operations adds unnecessary overhead as React needs
to maintain the memoized value and its dependencies, which can be more
expensive than just computing the value inline.
###### Suggested change ∙ *Feature Preview*
Remove useMemo and calculate the value directly:
```typescript
const tooltipContent = canExplore ? getSliceHeaderTooltip(sliceName) :
sliceName ?? null;
```
###### Provide feedback to improve future suggestions
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/7869a8c4-0282-4e73-b298-e7ea76fefa23/upvote)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/7869a8c4-0282-4e73-b298-e7ea76fefa23?what_not_true=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/7869a8c4-0282-4e73-b298-e7ea76fefa23?what_out_of_scope=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/7869a8c4-0282-4e73-b298-e7ea76fefa23?what_not_in_standard=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/7869a8c4-0282-4e73-b298-e7ea76fefa23)
</details>
<sub>
💬 Looking for more details? Reply to this comment to chat with Korbit.
</sub>
<!--- korbi internal id:68498813-242a-42bf-bdae-466ea1c126ad -->
[](68498813-242a-42bf-bdae-466ea1c126ad)
##########
superset-frontend/src/dashboard/components/SliceHeader/index.tsx:
##########
@@ -200,20 +200,20 @@
const canExplore = !editMode && supersetCanExplore;
- useEffect(() => {
- const headerElement = headerRef.current;
+ const tooltipContent = useMemo(() => {
if (canExplore) {
- setHeaderTooltip(getSliceHeaderTooltip(sliceName));
- } else if (
- headerElement &&
- (headerElement.scrollWidth > headerElement.offsetWidth ||
- headerElement.scrollHeight > headerElement.offsetHeight)
- ) {
- setHeaderTooltip(sliceName ?? null);
- } else {
- setHeaderTooltip(null);
+ return getSliceHeaderTooltip(sliceName);
}
- }, [sliceName, width, height, canExplore]);
+ return sliceName ?? null;
+ }, [canExplore, sliceName]);
+
+ const handleMouseEnter = useCallback(() => {
+ setIsHovering(true);
+ }, []);
+
+ const handleMouseLeave = useCallback(() => {
+ setIsHovering(false);
+ }, []);
Review Comment:
### Unnecessary Callback Memoization <sub></sub>
<details>
<summary>Tell me more</summary>
###### What is the issue?
useCallback is being used for simple state setter functions that don't
depend on any values.
###### Why this matters
Using useCallback for simple state setters adds unnecessary memory overhead
without providing performance benefits, as React's setState functions are
already stable across renders.
###### Suggested change ∙ *Feature Preview*
Define the handlers directly without useCallback:
```typescript
const handleMouseEnter = () => setIsHovering(true);
const handleMouseLeave = () => setIsHovering(false);
```
###### Provide feedback to improve future suggestions
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/5235d525-1775-44f5-89dc-5f6cae0cd0b3/upvote)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/5235d525-1775-44f5-89dc-5f6cae0cd0b3?what_not_true=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/5235d525-1775-44f5-89dc-5f6cae0cd0b3?what_out_of_scope=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/5235d525-1775-44f5-89dc-5f6cae0cd0b3?what_not_in_standard=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/5235d525-1775-44f5-89dc-5f6cae0cd0b3)
</details>
<sub>
💬 Looking for more details? Reply to this comment to chat with Korbit.
</sub>
<!--- korbi internal id:b7fd04ba-ee20-4266-bcb3-d7b79b6cbb2a -->
[](b7fd04ba-ee20-4266-bcb3-d7b79b6cbb2a)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
