useSessionStorage does not store defaultValue in session storage

[LucasLemanowicz]

What package has an issue?

@mantine/hooks

Describe the bug

When using useSessionStorage, the defaultValue is never initially saved to sessionStorage, leading to issues when trying to access it from outside the hook (see attached CodeSandbox link). Digging into the code, you can see why it's happening but it's unclear how to properly fix it without affecting the default behavior for others.

The starting point is in this useEffect which would make it seem like it will set a default value if a defaultValue prop is passed in and the value is undefined:

mantine/src/mantine-hooks/src/use-local-storage/create-storage.ts

Lines 145 to 149 in 59a4a7f

	useEffect(() => {
	if (defaultValue !== undefined && value === undefined) {
	setStorageValue(defaultValue);
	}
	}, [defaultValue, value, setStorageValue]);

We are passing in a defaultValue that is not undefined so that makes sense so far. But what about value? We can see where value is set:

mantine/src/mantine-hooks/src/use-local-storage/create-storage.ts

Line 106 in 59a4a7f

const [value, setValue] = useState<T>(readStorageValue(getInitialValueInEffect));

Looking into readStorageValue we see this function. Let's deal with it on a case by case basis:

mantine/src/mantine-hooks/src/use-local-storage/create-storage.ts

Lines 82 to 104 in 59a4a7f

	const readStorageValue = useCallback(
	(skipStorage?: boolean): T => {
	let storageBlockedOrSkipped;
	try {
	storageBlockedOrSkipped =
	typeof window === 'undefined' ||
	!(type in window) ||
	window[type] === null ||
	!!skipStorage;
	} catch (_e) {
	storageBlockedOrSkipped = true;
	}
	if (storageBlockedOrSkipped) {
	return defaultValue as T;
	}
	const storageValue = getItem(key);
	return storageValue !== null ? deserialize(storageValue) : (defaultValue as T);
	},
	[key, defaultValue]
	);

If skipStorage is set to true:

• storageBlockedOrSkipped will evaluate to true
• line 96 will enter the if block and we will return defaultValue as T; which will not be null
• that means value === undefined on line 146 will be false, and it will not setStorageValue.

If skipStorage is set to false:

• storageBlockedOrSkipped will in normal situations evaluate to false
• const storageValue = getItem(key); on line 100 will return null
• as a result return storageValue !== null ? deserialize(storageValue) : (defaultValue as T); on line 101 will also return the defaultValue which will not be null
• that means value === undefined on line 146 will be false, and it will not setStorageValue.

What version of @mantine/* packages do you have in package.json? (Note that all @mantine/* packages must have the same version in order to work correctly)

7.2.1

If possible, please include a link to a codesandbox with a minimal reproduction

https://codesandbox.io/s/festive-ptolemy-tw2dmr?file=/src/App.tsx

Do you know how to fix the issue

No

Do you want to send a pull request with a fix?

None

Possible fix

No response