elias-sundqvist
commented
2 years ago Here is a custom hook I made some time ago:
defines-react-components:: true
```jsx:component:useStoredState
const ctx = useContext(ReactComponentContext);
var ppctx = ctx.markdownPostProcessorContext;
const [propertyName, defaultValue] = props;
const dv = app.plugins.plugins["dataview"].api;
const page = dv.page(ppctx.sourcePath);
const dataPath = page["data-path"];
const propertyDataPath = `${dataPath}/${propertyName}.json`
const [val, setVal] = useState(defaultValue);
const [timeoutID, setTimeoutID] = useState(-1);
let otherTimeoutID = timeoutID;
useEffect(async ()=>{
if(!dataPath) {
new obsidian.Notice("useStoredState requires the data-path property to be set for the note.");
return null;
}
try {
const newVal = await app.vault.readJson(propertyDataPath);
if(val!=newVal && newVal!==null) {
setVal(newVal);
}
} catch(e){}
}, []);
const setStoredValue = async val => {
if(!dataPath) {
new obsidian.Notice("useStoredState requires the data-path property to be set for the note.");
return null;
}
try {
await app.vault.createFolder(dataPath);
} catch(e){}
setVal(val);
clearTimeout(timeoutID);
clearTimeout(otherTimeoutID);
const newTimeoutId = setTimeout(()=>{
app.vault.writeJson(propertyDataPath, val);
},2000);
otherTimeoutID=newTimeoutId;
setTimeoutID(newTimeoutId);
}
return [val, setStoredValue];
To use it, you need to have Dataview installed, and specify a location for the data like this:
````md
data-path:: data/my-button
```jsx:
function Counter(props) {
const [count, setCount] = useStoredState(["count",0])
return (
<div>
<p>You clicked me {count} times!!!</p>
<button onClick={() => setCount(count + 1)}>
{props.source}
</button>hello
</div>
)
}
<Counter />
I have not tested it extensively, so there may be some bugs, but this should hopefully get you started :) 
m-paul
I'm relatively new to React, so I might not be asking this question correctly, but is there a way to cache data at a more global level within Obsidian and access that data from a component?
For example, I created a test.md file with the following content:
The component renders, and I can click the button incrementing the count, but if I click the button multiple times, sometimes the counter resets to 0, as if the component was re-rendered/reset. And, when I navigate away from the page and back, the counter is reset to 0. What I'd like to do is store the counter in a state that is persisted between reloads.
This is a basic use-case, but solving for this one would help me solve for a more complicated use-case. I am trying to build a component that will pull back data via an API, but only do so if the data isn't already cached - and where the cache persists even when navigating between pages or when the page is modified or re-rendered (but not necessarily when the app is restarted).