Stream of values with react hooks - reactjs

Question

I have value X coming from the server. I would like to expose an interface similar to
interface Xclient {
getX(): Promise<X>
}
that I will later use from my react function component.
I say similar because behind the scenes I want it to:
first return value from the storage (its react-native)
simultaneously dispatch network call for newer version of X and re-render the component once I have the response
so instead of Promise I probably need Observable. But then how to use it with react in general and react hooks in particular?
I'm coming from the backend background so there may be some more canonical approach that I dont know about. I really dont want to use redux if possible!

Answer 1

If i understand correctly you have two data source (local storage and your api) and you want to get value from local storage and then get actual value from api. So, you should make next:
import { useState } from "react";
const localProvider: Xclient = new Something();
const apiProvider: Xclient = new SomethingElse();
export function SimpleView() {
const [state, setState] = useState("default value");
localProvider()
.then((response) => {
setState(response);
apiProvider()
.then((actualResponse) => {
setState(actualResponse);
})
.catch(/* */);
})
.catch(/* */);
}
But I see no reason for call it synchronously and you can want to run it parallel:
import { useState } from "react";
const localProvider: Xclient = new Something();
const apiProvider: Xclient = new SomethingElse();
export function SimpleView() {
const [state, setState] = useState("default value");
localProvider()
.then((response) => {
setState(response);
})
.catch(/* */);
apiProvider()
.then((actualResponse) => {
setState(actualResponse);
})
.catch(/* */);
}
If you want to encapsulate this logic you can make a function like this:
import { useState } from "react";
const localProvider: Xclient = new Something();
const apiProvider: Xclient = new SomethingElse();
function getValue(localProvider, apiProvider, consumer) {
localProvider()
.then((response) => {
consumer(response);
})
.catch(/* */);
apiProvider()
.then((actualResponse) => {
consumer(actualResponse);
})
.catch(/* */);
}
export function SimpleView() {
const [state, setState] = useState("default value");
getValue(localProvider, apiProvider, setState);
}
UPD:
As #PatrickRoberts correctly noticed my examples contain the race condition, this code solves it:
import { useState } from "react";
const localProvider: Xclient = new Something();
const apiProvider: Xclient = new SomethingElse();
function getValue(localProvider, apiProvider, consumer) {
let wasApiResolved = false;
localProvider()
.then((response) => {
if (!wasApiResolved) {
consumer(response);
}
})
.catch(/* */);
apiProvider()
.then((actualResponse) => {
wasApiResolved = true;
consumer(actualResponse);
})
.catch(/* */);
}
export function SimpleView() {
const [state, setState] = useState("default value");
getValue(localProvider, apiProvider, setState);
}

Answer 2

I would personally write a custom hook for this to encapsulate React's useReducer().
This approach is inspired by the signature of the function Object.assign() because the sources rest parameter prioritizes later sources over earlier sources as each of the promises resolve:
import { useEffect, useReducer, useState } from 'react';
function useSources<T> (initialValue: T, ...sources: (() => Promise<T>)[]) {
const [fetches] = useState(sources);
const [state, dispatch] = useReducer(
(oldState: [T, number], newState: [T, number]) =>
oldState[1] < newState[1] ? newState : oldState,
[initialValue, -1]
);
useEffect(() => {
let mounted = true;
fetches.forEach(
(fetch, index) => fetch().then(value => {
if (mounted) dispatch([value, index]);
});
);
return () => { mounted = false; };
}, [fetches, dispatch]);
return state;
}
This automatically updates state to reference the result of the latest available source, as well as the index of the source which provided the value, each time a promise resolves.
The reason we include const [fetches] = useState(sources); is so the reference to the array fetches remains constant across re-renders of the component that makes the call to the useSources() hook.
That line could be changed to const fetches = useMemo(() => sources); if you don't mind the component potentially making more than one request to each source during its lifetime, because useMemo() doesn't semantically guarantee memoization. This is explained in the documentation:
You may rely on useMemo as a performance optimization, not as a semantic guarantee. In the future, React may choose to "forget" some previously memoized values and recalculate them on next render, e.g. to free memory for offscreen components.
Here's an example usage of the useSources() hook:
const storageClient: Xclient = new StorageXclient();
const networkClient: Xclient = new NetworkXclient();
export default () => {
const [x, xIndex] = useSources(
'default value',
() => storageClient.getX(),
() => networkClient.getX()
);
// xIndex indicates the index of the source from which x is currently loaded
// or -1 if x references the default value
};