Skip to content

Instantly share code, notes, and snippets.

@Rigel772

Rigel772/App.js

Created November 1, 2020 15:10
Show Gist options
  • Save Rigel772/9bbf9c7abe8e213b75d2896ecbae6070 to your computer and use it in GitHub Desktop.
Save Rigel772/9bbf9c7abe8e213b75d2896ecbae6070 to your computer and use it in GitHub Desktop.
Download ZIP
[custom hooks - useLocalStorage] #react
Raw
App.js
import React, { useState } from 'react'
import useLocalStorage from './useLocalStorage'
import useUpdateLogger from './useUpdateLogger'
function App() {
const [name, setName] = useLocalStorage('name', '')
useUpdateLogger(name)
return (
<div>
<h1>Hello</h1>
<input
type='text'
value={name}
onChange={(e) => setName(e.target.value)}
/>
</div>
)
}
export default App
Raw
useLocalStorage.js
import { useState, useEffect } from 'react'
function getValue(key, initValue) {
const savedValue = JSON.parse(localStorage.getItem(key))
if (savedValue) return savedValue
if (initValue instanceof Function) return initValue()
return initValue
}
export default function useLocalStorage(key, initValue) {
const [value, setValue] = useState(() => {
return getValue(key, initValue)
})
useEffect(() => {
localStorage.setItem(key, JSON.stringify(value))
}, [value])
return [value, setValue]
}
Raw
useUpdateLogger.js
import { useEffect } from 'react'
export default function useUpdateLogger(value) {
useEffect(() => {
console.log(value)
}, [value])
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment