refactor: change helpers name to make them shorter and easy to use

Author: mohcinenazrhan

src/index.js

@@ -5,32 +5,32 @@ const useLifecycleHelpers = (state = {}, props = {}) => {
   const [prevProps, setPrevProps] = useState(props)
 
   /**
-   * useComponentDidMount() is invoked immediately after a component is mounted.
+   * useDidMount() is invoked immediately after a component is mounted.
     this is a good place to instantiate the network request.
 
     This method is a good place to set up any subscriptions.
     If you do that, don’t forget to unsubscribe in componentWillUnmount().
 
-    You may call setState() immediately in useComponentDidMount().
+    You may call setState() immediately in useDidMount().
     It will trigger an extra rendering.
    * @param {Function} callback
    */
-  const useComponentDidMount = (callback) => {
+  const useDidMount = (callback) => {
     useEffect(() => {
       callback()
       // eslint-disable-next-line
     }, [])
   }
 
   /**
-   * useComponentDidUpdate() is invoked immediately after updating occurs.
+   * useDidUpdate() is invoked immediately after updating occurs.
     This method is not called for the initial render.
 
     Use this as an opportunity to operate on the DOM when the component has been updated.
     This is also a good place to do network requests as long as you compare the current props to previous props (e.g. a network request may not be necessary if the props have not changed).
    * @param {Function} callback
    */
-  const useComponentDidUpdate = (
+  const useDidUpdate = (
     callback
   ) => {
     const isFirstRender = useRef(true)
@@ -48,9 +48,9 @@ const useLifecycleHelpers = (state = {}, props = {}) => {
   }
 
   /**
-   * useOnDependenciesChange() is invoked immediately after one of the dependencies changed.
+   * useDepsDidChange() is invoked immediately after one of the dependencies changed.
    * This is also a good place to do network requests as long as you compare the current dependencies to previous dependencies value
-   * EXP : useOnDependenciesChange(
+   * EXP : useDepsDidChange(
             prevState => {
               console.log('componentDidUpdate', state, prevState)
             },
@@ -59,7 +59,7 @@ const useLifecycleHelpers = (state = {}, props = {}) => {
    * @param {Function} callback
    * @param {Array} dependencies
    */
-  const useOnDependenciesChange = (
+  const useDepsDidChange = (
     callback,
     dependencies
   ) => {
@@ -81,15 +81,15 @@ const useLifecycleHelpers = (state = {}, props = {}) => {
   }
 
   /**
-   * useComponentWillUnmount() is invoked immediately before a component is unmounted and destroyed.
+   * useWillUnmount() is invoked immediately before a component is unmounted and destroyed.
    * Perform any necessary cleanup in this method, such as invalidating timers,
    * canceling network requests, or cleaning up any subscriptions that were created in componentDidMount().
 
-   * You should not call setState() in useComponentWillUnmount() because the component will never be re-rendered.
+   * You should not call setState() in useWillUnmount() because the component will never be re-rendered.
    * Once a component instance is unmounted, it will never be mounted again.
    * @param {Function} callback
    */
-  const useComponentWillUnmount = callback => {
+  const useWillUnmount = callback => {
     useEffect(() => {
       return () => {
         callback()
@@ -99,10 +99,10 @@ const useLifecycleHelpers = (state = {}, props = {}) => {
   }
 
   return {
-    useComponentDidMount,
-    useOnDependenciesChange,
-    useComponentDidUpdate,
-    useComponentWillUnmount
+    useDidMount,
+    useDepsDidChange,
+    useDidUpdate,
+    useWillUnmount
   }
 }
 

src/test.js

@@ -19,28 +19,28 @@ const Component = props => {
   const [state, setState] = useState({ counter: 0 })
 
   const {
-    useComponentDidMount,
-    useComponentDidUpdate,
-    useComponentWillUnmount,
-    useOnDependenciesChange
+    useDidMount,
+    useDidUpdate,
+    useWillUnmount,
+    useDepsDidChange
   } = useLifecycleHelpers(state, props)
 
-  useComponentDidMount(() => {
+  useDidMount(() => {
     setComponentState('Mounted')
   })
 
-  useComponentDidUpdate((prevState, prevProps) => {
+  useDidUpdate((prevState, prevProps) => {
     if (props.data !== prevProps.data) setComponentState('Updated')
   })
 
-  useOnDependenciesChange(
+  useDepsDidChange(
     prevState => {
       if (state.counter !== prevState.counter) setComponentState('DepsUpdated')
     },
     ['counter']
   )
 
-  useComponentWillUnmount(() => {
+  useWillUnmount(() => {
     mockCleanupCallback()
   })
 
@@ -95,4 +95,4 @@ describe('Test useLifecycleHelpers custom hook', () => {
     expect(component).toBe(null)
     expect(mockCleanupCallback.mock.calls.length).toBe(1)
   })
-})
+})