feat: useMemoWithPrevious React hook
#2820
Conversation
Your org requires the Graphite merge queue for merging into mainAdd the label “flow:merge-queue” to the PR and Graphite will automatically add it to the merge queue when it’s ready to merge. Or use the label “flow:hotfix” to add to the merge queue as a hot fix. You must have a Graphite account and log in to Graphite in order to use the merge queue. Sign up using this link. |
|
This stack of pull requests is managed by Graphite. Learn more about stacking. |
yomybaby
force-pushed
the
feature/use-memo-with-previouse
branch
from
8c18df8 to
9f79883
Compare
Coverage report for
|
St.❔ |
Category | Percentage | Covered / Total |
|---|---|---|---|
| 🔴 | Statements | 4.96% (+0.15% 🔼) |
360/7253 |
| 🔴 | Branches | 4.43% (+0.02% 🔼) |
221/4992 |
| 🔴 | Functions | 2.97% (+0.16% 🔼) |
71/2393 |
| 🔴 | Lines | 4.86% (+0.15% 🔼) |
345/7093 |
Show new covered files 🐣
St.❔ |
File | Statements | Branches | Functions | Lines |
|---|---|---|---|---|---|
| 🟢 | ... / useMemoWithPrevious.tsx |
100% | 100% | 100% | 100% |
Test suite run success
100 tests passing in 13 suites.
Report generated by 🧪jest coverage report action from 5702e0a
| useEffect(() => { | ||
| prevRef.current = current; | ||
| // Only update when deps change | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps |
There was a problem hiding this comment.
| // eslint-disable-next-line react-hooks/exhaustive-deps |
| const memoizedPrev = useMemo(() => { | ||
| return prevRef.current; | ||
| // Only update when the reset key changes and deps change | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps |
There was a problem hiding this comment.
| // eslint-disable-next-line react-hooks/exhaustive-deps |
There was a problem hiding this comment.
This useMemo does not include prevRef as a dependency item because, in this case, only deps and prevResetKey are intentionally considered as dependency items.
Without this comment, ESLint complains about the missing dependency.
| const prevRef = useRef(initialPrev); | ||
| const [prevResetKey, setPrevResetKey] = useState({}); | ||
|
|
||
| // eslint-disable-next-line react-hooks/exhaustive-deps |
There was a problem hiding this comment.
| // eslint-disable-next-line react-hooks/exhaustive-deps |
There was a problem hiding this comment.
Without this eslint complained `React Hook useMemo has a missing dependency: 'factory'. Either include it or remove the dependency array.eslintreact-hooks/exhaustive-deps
yomybaby
force-pushed
the
feature/use-memo-with-previouse
branch
from
9f79883 to
01ea18e
Compare
| const prevRef = useRef(initialPrev); | ||
| const [prevResetKey, setPrevResetKey] = useState({}); | ||
|
|
||
| const current = useMemo(factory, deps); |
There was a problem hiding this comment.
There was a problem hiding this comment.
I don't know why it was deleted. 😢 I just added it again.
yomybaby
force-pushed
the
feature/use-memo-with-previouse
branch
from
01ea18e to
2f93b41
Compare
yomybaby
force-pushed
the
feature/use-memo-with-previouse
branch
2 times, most recently
from
c3224fc to
a3efc59
Compare
Merge activity
|
Resolves #2819 **Changes:** Introduces a new `useMemoWithPrevious` hook to manage previous and current values with reset capability, replacing the manual `useRef` implementation in ContainerLogModal. This hook provides a more robust way to track state changes while maintaining previous values. **Implementation Details:** - Created new `useMemoWithPrevious` hook that returns both current and previous values along with a reset function - Updated ContainerLogModal to use the new hook for tracking log line numbers - Replaced manual `previousLastLineNumber` ref management with the new hook's `resetPrevious` functionality - Improved state management when switching kernel IDs or changing log sizes **Testing Requirements:** - Verify log highlighting works correctly when switching between different kernels - Confirm previous line numbers are properly reset when changing log sizes - Check that log display maintains proper highlighting of new content
yomybaby
force-pushed
the
feature/use-memo-with-previouse
branch
from
a3efc59 to
5702e0a
Compare
Resolves #2819
Changes:
Introduces a new
useMemoWithPrevioushook to manage previous and current values with reset capability, replacing the manualuseRefimplementation in ContainerLogModal. This hook provides a more robust way to track state changes while maintaining previous values.Implementation Details:
useMemoWithPrevioushook that returns both current and previous values along with a reset functionpreviousLastLineNumberref management with the new hook'sresetPreviousfunctionalityTesting Requirements: