I've refactored all the business logic by hiding it behind hooks.
Before:
function App({productId}) {
const [item, setItem] = useState(null);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
setLoading(true);
(async () => {
const found = await useContext(Store).find(productId);
setItem(found);
setIsLoading(false);
})();
}, [item, products]);
}
After:
function App({productId}) {
const [item, isLoading] = useProductId(productId);
}
But how suddenly someone brought up a problem when productId
is null
.
I know I can't do:
function App({productId}) {
if(!productId) {
return (<Loading />);
}
const [item, isLoading] = useProductId(productId);
}
Is my only recourse to go back and change all the hooks to accept null
? Because technically null isn't an error state nor is it a loading state.
null
value before start fetching data? – Saeed Shamloo