Conversation
Preparation for replacing the module-level toast ID counter with a ref-based counter scoped to each hook instance.
The module-level let counter persists across hot reloads and is shared between multiple hook instances. Removing it in preparation for a useRef-based replacement.
Each useToast instance now has its own counter via useRef. The ref persists across renders but is scoped to the component lifecycle, avoiding the issues with module-level state.
Replaces the module-level counter with the ref-based counter. Each useToast instance now generates IDs independently, preventing duplicate IDs if multiple instances are ever created. Closes #249 (toast ID part)
Prevents a potential crash if Toast is rendered without an onClose handler during development or testing.
Screen readers will now announce each toast as an alert when it appears, improving accessibility for notifications.
Makes it easier to target the toast container in integration tests.
The label now reads 'Dismiss success notification' etc., giving screen reader users more context about which notification they are dismissing.
The fade-out-then-remove logic was duplicated in the timer effect and the close button handler. Extracting it into a single dismiss callback wrapped in useCallback ensures consistent behavior.
The fixed toast container could intercept clicks on page elements behind it. Setting pointer-events-none on the container and pointer-events-auto on individual toasts ensures only visible toasts capture interaction.
getInitialTheme now returns 'light' when window is undefined, preventing crashes in server-side rendering or pre-rendering environments. Closes #249 (ThemeContext part)
localStorage.getItem() can throw in private browsing mode on some browsers. matchMedia can throw in restricted environments. Wrapping both in try/catch ensures getInitialTheme always returns a valid theme string.
If localStorage is unavailable (e.g. quota exceeded, private browsing), the setItem call would throw and break the theme toggle. Silently catching keeps the toggle functional even without persistence.
Prevents errors when running in environments where document is not defined, such as Node.js during SSR.
React DevTools will now show 'ThemeContext' instead of 'Context' in the component tree, making debugging easier.
Test files can now import ThemeContext directly to verify provider values without relying on the useTheme hook.
Preparation for memoizing the context value and the toggle callback to prevent unnecessary re-renders of consumers.
The toggle function identity is now stable across renders, which prevents unnecessary re-renders of components that depend on it.
Without useMemo the provider creates a new value object on every render, causing all consumers to re-render even when the theme has not changed. Memoizing on [theme, toggleTheme] fixes this.
Test files can now import and call getInitialTheme directly to verify the SSR guard and localStorage fallback logic.
Consumers that only need to know if dark mode is active can use isDark instead of comparing theme === 'dark' repeatedly.
Allows consumers to programmatically set a specific theme rather than only toggling. Useful for settings pages or preset themes.
Avoids repeating the string literal in multiple places. If the key ever needs to change, it only needs to be updated once.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #249