react-use
useAsyncuseBatteryuseFaviconuseGeolocationuseHoveruseLifecyclesuseLocationuseLoggeruseMediauseMountuseRafuseSetstateuseSpeechuseTimeoutuseTitleuseUnmountuseUpdaterehooks
useComponentSizeuseDeviceOrientationuseDocumentTitleuseInputValueuseLocalStorageuseNetworkStatususeOnlineStatususeWindowMousePositionuseWindowSizeReact lifecycle hook that logs in console as component transitions through life-cycles.
name— component name.props— latest props.
💡 Implementation
Pretty
Copy
const useLifecycles = (mount, unmount) => {
useEffect(() => {
if (mount) mount();
return () => {
if (unmount) unmount();
};
}, []);
};
const useLogger = (name, props) => {
useLifecycles(
() => console.log(`${name} mounted`),
() => console.log(`${name} un-mounted`)
);
useEffect(() => {
console.log(`${name} props updated`, props);
});
};
🚀 Usage
Pretty
Copy
function Demo(props) {
useLogger("Demo", props);
return null;
}
⚡Preview
🚨 console
["Demo mounted"]
["Demo props updated",{}]
Contributors
