In my React app, I have a custom defined hook that holds a useState value internally, but the custom hook itself does not return any values.
If the value of its internal useState changes would this cause the component that calls this custom hook to re-render?
Yes it re-renders the component. The custom hooks helps to reuse stateful logic in different components, but in the end, when you use a custom hooks all states and effects inside of it are part of the component where you called the custom hook. So yes, the change of state inside the custom hooks re-renders the component where you used your custom hook, even when this does not return anything.
No, it does not re-render the component.
From the documentation (https://reactjs.org/docs/hooks-custom.html):
Do two components using the same Hook share state? No. Custom Hooks are a mechanism to reuse stateful logic (such as setting up a subscription and remembering the current value), but every time you use a custom Hook, all state and effects inside of it are fully isolated.
Example Hook:
export function useExample () {
const [saveCount,setSaveCount] = useState(0);
console.log('Internal saveCount value',saveCount);
const save=()=>{
return fetch(blah, blah, blah).then((result)=>{
setSaveCount((prev)=>{
return prev+1;
});
return result;
});
}
return {
saveCount:saveCount,
save:save
}
}
Example Component that consumes it:
export function MyComponent (props) {
const { saveCount, save } = useExample();
console.log('External saveCount value',saveCount);
const onClick=()=>{
save();
}
useEffect(()=>{
console.log('Effect saveCount value',saveCount);
},[saveCount]);
return (
<Button onClick={onClick}>Blah, blah, blah</Button>
)
}
If you click the button, the "save" function will execute, and you'll see the "Internal saveCount value" message with the incremented value, but you will not see any of the change messages in the component. The hook's state belongs to it, and it alone.
