useLocalStorage State
ReactJS
Hard
7 views
Problem Description
Create a hook that syncs a string value to localStorage.
Output Format
Render a React component.
Constraints
Read once on init and write on change.
Official Solution
import React, { useEffect, useState } from 'react';
function useLocalStorageString(key, initialValue) {
const [value, setValue] = useState(() => {
try {
const raw = localStorage.getItem(key);
return raw == null ? initialValue : raw;
} catch {
return initialValue;
}
});
useEffect(() => {
try {
localStorage.setItem(key, value);
} catch {}
}, [key, value]);
return [value, setValue];
}
export default function App() {
const [name, setName] = useLocalStorageString('meetcode_name', '');
return (
<div style={{ padding: 16, width: 420 }}>
<h2 style={{ marginTop: 0 }}>meetcode profile</h2>
<label>
Display name
<div>
<input value={name} onChange={(e) => setName(e.target.value)} style={{ width: '100%', padding: '10px 12px', borderRadius: 12, border: '1px solid #bbb' }} />
</div>
</label>
<div style={{ marginTop: 10, color: '#555' }}>Saved locally: {name || '...'}</div>
</div>
);
}
Solutions (0)
No solutions submitted yet. Be the first!
No comments yet. Start the discussion!