Ontwikkel een dynamische React Hook voor herbruikbare functionaliteit
description
Met deze prompt kan de gebruiker een op maat gemaakte React Hook ontwikkelen die herbruikbare logica in hun project mogelijk maakt. Dit helpt bij het verminderen van duplicatie, verhoogt de codekwaliteit en maakt onderhoud eenvoudiger. De begeleiding en voorbeeldcode zorgen voor een snellere implementatie en betere best practices dan standaard documentatie.
prompt
Help me bij het ontwikkelen van een dynamische React Hook die specifieke functionaliteit herbruikbaar maakt binnen mijn project. Beschrijf welke parameters en logic ...
try_prompt
generate_helper
disclaimerOnPageApi
tags
ai_answers
provider: openai
model: gpt-4.1-nano
Natuurlijk! Hier is een overzicht van hoe je een herbruikbare React Hook kunt maken om React state te synchroniseren met localStorage voor dataperistentie:
**Parameters die je moet implementeren:**
1. `key` (string): De key onder welke de data in localStorage wordt opgeslagen.
2. `initialValue` (any): De initiële waarde van de state als er nog geen data in localStorage is.
3. Optioneel: Een functie of parameter om de data te serialiseren/deserialiseren, voor complexere use-cases.
**Logica:**
- Bij initialisatie: probeer data uit localStorage te lezen. Als die er is, deserialiseer en gebruik dat als initieel state; anders gebruik je `initialValue`.
- Bij elke update van de state: update ook localStorage met de nieuwe data, geserialiseerd.
- Gebruik React's `useState` en `useEffect` hooks.
Hier is een voorbeeld van de implementatie van zo'n hook:
```javascript
import { useState, useEffect } from 'react';
function useLocalStorage(key, initialValue) {
// Lees de initial waarde uit localStorage of gebruik de default
const [storedValue, setStoredValue] = useState(() => {
try {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
} catch (error) {
console.error(`Fout bij lezen van localStorage key "${key}":`, error);
return initialValue;
}
});
// Gebruik useEffect om localStorage bij te werken wanneer storedValue verandert
useEffect(() => {
try {
window.localStorage.setItem(key, JSON.stringify(storedValue));
} catch (error) {
console.error(`Fout bij schrijven naar localStorage key "${key}":`, error);
}
}, [key, storedValue]);
return [storedValue, setStoredValue];
}
export default useLocalStorage;
```
**Gebruik in je component:**
```javascript
import React from 'react';
import useLocalStorage from './useLocalStorage';
function MijnComponent() {
const [data, setData] = useLocalStorage('mijnDataKey', { naam: '', leeftijd: 0 });
const handleChange = (e) => {
setData({ ...data, naam: e.target.value });
};
return (
<div>
<input value={data.naam} onChange={handleChange} />
<p>Naam: {data.naam}</p>
</div>
);
}
```
**Aanpasbaarheid:**
- Je kunt de hook uitbreiden met serialisatie/deserialisatie functies voor complexere data.
- Je kunt ook een cleanup of callback toevoegen bij unmounting.
Met deze aanpak maak je een herbruikbare hook die je eenvoudig overal in je project kunt inzetten voor persistentie met localStorage.
provider: deepseek
model: deepseek-chat
Zeker! Hier is een dynamische React Hook voor synchronisatie met localStorage, inclusief parameters, logica en een volledig voorbeeld:
## Hook Parameters
```javascript
const [value, setValue, clearValue] = useLocalStorage(key, initialValue, options);
```
**Parameters:**
- `key` (string): Unieke sleutel voor localStorage
- `initialValue` (any): Startwaarde als er nog geen data is
- `options` (object, optioneel):
- `serializer`: Aangepaste serialisatiefunctie (default: JSON.stringify)
- `deserializer`: Aangepaste deserialisatiefunctie (default: JSON.parse)
- `syncAcrossTabs`: Boolean voor synchronisatie tussen browser tabs (default: false)
## Te implementeren logica
1. **Initialisatie**: Lees bestaande waarde uit localStorage bij mount
2. **Synchronisatie**: Update localStorage bij elke state wijziging
3. **Error handling**: Vang localStorage errors op (quota exceeded, etc.)
4. **Type safety**: Handige serialisatie/deserialisatie
5. **Cross-tab sync**: Optionele synchronisatie tussen browser tabs
## Voorbeeldimplementatie
```javascript
import { useState, useEffect, useCallback } from 'react';
const useLocalStorage = (key, initialValue, options = {}) => {
const {
serializer = JSON.stringify,
deserializer = JSON.parse,
syncAcrossTabs = false
} = options;
const [storedValue, setStoredValue] = useState(() => {
try {
const item = window.localStorage.getItem(key);
return item ? deserializer(item) : initialValue;
} catch (error) {
console.warn(`Fout bij lezen van localStorage key "${key}":`, error);
return initialValue;
}
});
const setValue = useCallback((value) => {
try {
const valueToStore = value instanceof Function ? value(storedValue) : value;
setStoredValue(valueToStore);
window.localStorage.setItem(key, serializer(valueToStore));
} catch (error) {
console.warn(`Fout bij schrijven naar localStorage key "${key}":`, error);
}
}, [key, serializer, storedValue]);
const clearValue = useCallback(() => {
try {
window.localStorage.removeItem(key);
setStoredValue(initialValue);
} catch (error) {
console.warn(`Fout bij verwijderen van localStorage key "${key}":`, error);
}
}, [key, initialValue]);
// Cross-tab synchronisatie
useEffect(() => {
if (!syncAcrossTabs) return;
const handleStorageChange = (event) => {
if (event.key === key && event.newValue !== null) {
try {
setStoredValue(deserializer(event.newValue));
} catch (error) {
console.warn(`Fout bij synchroniseren van key "${key}":`, error);
}
}
};
window.addEventListener('storage', handleStorageChange);
return () => window.removeEventListener('storage', handleStorageChange);
}, [key, deserializer, syncAcrossTabs]);
return [storedValue, setValue, clearValue];
};
export default useLocalStorage;
```
## Gebruiksvoorbeeld
```javascript
import useLocalStorage from './useLocalStorage';
const App = () => {
const [userPreferences, setUserPreferences, clearPreferences] = useLocalStorage(
'user-preferences',
{ theme: 'light', language: 'nl' },
{ syncAcrossTabs: true }
);
const updateTheme = (theme) => {
setUserPreferences(prev => ({ ...prev, theme }));
};
return (
<div>
<p>Huidig thema: {userPreferences.theme}</p>
<button onClick={() => updateTheme('dark')}>Donker thema</button>
<button onClick={() => updateTheme('light')}>Licht thema</button>
<button onClick={clearPreferences}>Reset voorkeuren</button>
</div>
);
};
```
## Aanpasopties
- **Custom serialisatie**: Voor complexe data structuren
- **Encryptie**: Toevoegen van beveiligingslaag
- **Expiry date**: Tijdelijke opslag met vervaldatum
- **Namespace**: Prefix voor betere key management
Deze hook is volledig aanpasbaar aan jouw specifieke projectbehoeften!