Title: fix: migrate deprecated componentWillReceiveProps to componentDidUpdate by 18vikastg · Pull Request #798 · algorithm-visualizer/algorithm-visualizer · GitHub
Open Graph Title: fix: migrate deprecated componentWillReceiveProps to componentDidUpdate by 18vikastg · Pull Request #798 · algorithm-visualizer/algorithm-visualizer
X Title: fix: migrate deprecated componentWillReceiveProps to componentDidUpdate by 18vikastg · Pull Request #798 · algorithm-visualizer/algorithm-visualizer
Description: This pull request refactors several React component lifecycle methods to use componentDidUpdate instead of the deprecated componentWillReceiveProps, and introduces persistent workspace state and improved event handling. These changes enhance code maintainability, user experience, and future compatibility. Lifecycle method modernization: Replaced componentWillReceiveProps with componentDidUpdate in App, Navigator, Player, FoldableAceEditor, VisualizationViewer, and ToastContainer components to ensure compatibility with modern React best practices. [1] [2] [3] [4] [5] [6] Workspace state persistence: Added logic in App to load and persist workspace preferences (navigatorOpened and workspaceWeights) using localStorage, so user layout choices are retained across sessions. [1] [2] Event handling improvements: In Player, added keyboard shortcuts for play/pause (space), previous (left arrow), and next (right arrow) actions, and window resize handling, improving accessibility and usability. Also added cleanup for event listeners on unmount. Toast notification timing fix: Refactored ToastContainer to correctly handle toast timeouts and cleanup, ensuring toasts disappear after the intended delay and preventing memory leaks. Editor folding logic refinement: Improved folding logic in FoldableAceEditor so tracers are folded only when appropriate, reducing unnecessary operations.- Replaced componentWillReceiveProps with componentDidUpdate in 6 components Added proper prevProps comparison to prevent unnecessary updates Ensures compatibility with React 17+ and future versions Resolves deprecation warnings and future-proofs the codebase. This pull request refactors several React components to replace the deprecated componentWillReceiveProps lifecycle method with the recommended componentDidUpdate. It also adds new workspace persistence features and keyboard shortcuts, improving user experience and code maintainability. Lifecycle method modernization Replaced all usages of componentWillReceiveProps with componentDidUpdate in App, Navigator, Player, ToastContainer, FoldableAceEditor, and VisualizationViewer components, ensuring compatibility with newer React versions and improving reliability. [1] [2] [3] [4] [5] [6] Workspace persistence improvements Added logic in App to load and persist workspace preferences such as navigator visibility and workspace weights using localStorage, allowing users' UI state to be remembered across sessions. [1] [2] Keyboard shortcut enhancements Implemented keyboard shortcuts in Player for play/pause (space), previous (left arrow), and next (right arrow) actions, improving accessibility and user interaction. Resource management Ensured proper cleanup of event listeners and timeouts in Player and ToastContainer components on unmount, preventing potential memory leaks. [1] [2] Component-specific update logic Improved update logic in FoldableAceEditor and VisualizationViewer to correctly respond to prop changes by folding tracers or updating visualizations only when relevant data changes. [1] [2]
Open Graph Description: This pull request refactors several React component lifecycle methods to use componentDidUpdate instead of the deprecated componentWillReceiveProps, and introduces persistent workspace state and im...
X Description: This pull request refactors several React component lifecycle methods to use componentDidUpdate instead of the deprecated componentWillReceiveProps, and introduces persistent workspace state and im...
Opengraph URL: https://github.com/algorithm-visualizer/algorithm-visualizer/pull/798
X: @github
Domain: Github.com
| route-pattern | /:user_id/:repository/pull/:id/files(.:format) |
| route-controller | pull_requests |
| route-action | files |
| fetch-nonce | v2:d72e4cc6-f950-f3d5-6af7-30f74978ea23 |
| current-catalog-service-hash | ae870bc5e265a340912cde392f23dad3671a0a881730ffdadd82f2f57d81641b |
| request-id | 8280:3BEA31:88F1BF:B85BEC:6A629FAA |
| html-safe-nonce | 6359b5ac32eb32d73566b81f8ac29183aed151c31e771dfc29bceab76841f88b |
| visitor-payload | eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiI4MjgwOjNCRUEzMTo4OEYxQkY6Qjg1QkVDOjZBNjI5RkFBIiwidmlzaXRvcl9pZCI6IjQ4MDUzNjQzMzYzMTQ5ODIzMTQiLCJyZWdpb25fZWRnZSI6ImlhZCIsInJlZ2lvbl9yZW5kZXIiOiJpYWQifQ== |
| visitor-hmac | 0a72a0cd7d39af284a3d639016cef537fa3238fe3277d3cc81a04195b3580fdf |
| hovercard-subject-tag | pull_request:2921033404 |
| github-keyboard-shortcuts | repository,pull-request-list,pull-request-conversation,pull-request-files-changed,copilot |
| google-site-verification | Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I |
| octolytics-url | https://collector.github.com/github/collect |
| analytics-location | / |
| fb:app_id | 1401488693436528 |
| apple-itunes-app | app-id=1477376905, app-argument=https://github.com/algorithm-visualizer/algorithm-visualizer/pull/798/files |
| twitter:image | https://avatars.githubusercontent.com/u/152787656?s=400&v=4 |
| twitter:card | summary_large_image |
| og:image | https://avatars.githubusercontent.com/u/152787656?s=400&v=4 |
| og:image:alt | This pull request refactors several React component lifecycle methods to use componentDidUpdate instead of the deprecated componentWillReceiveProps, and introduces persistent workspace state and im... |
| og:site_name | GitHub |
| og:type | object |
| hostname | github.com |
| expected-hostname | github.com |
| None | a6443033349a18134b517627f043d4a59a5110337b879810c7229c2c7e28eda0 |
| turbo-cache-control | no-preview |
| diff-view | unified |
| go-import | github.com/algorithm-visualizer/algorithm-visualizer git https://github.com/algorithm-visualizer/algorithm-visualizer.git |
| octolytics-dimension-user_id | 38487505 |
| octolytics-dimension-user_login | algorithm-visualizer |
| octolytics-dimension-repository_id | 58836534 |
| octolytics-dimension-repository_nwo | algorithm-visualizer/algorithm-visualizer |
| octolytics-dimension-repository_public | true |
| octolytics-dimension-repository_is_fork | false |
| octolytics-dimension-repository_network_root_id | 58836534 |
| octolytics-dimension-repository_network_root_nwo | algorithm-visualizer/algorithm-visualizer |
| turbo-body-classes | logged-out env-production page-responsive full-width |
| disable-turbo | true |
| browser-stats-url | https://api.github.com/_private/browser/stats |
| browser-errors-url | https://api.github.com/_private/browser/errors |
| release | d6c6cacbe32d3ddfd1796fbd1a39b8fb47b87daf |
| ui-target | full |
| theme-color | #1e2327 |
| color-scheme | light dark |
Links:
Viewport: width=device-width