In this project you all will know lifecycle of React Hooks (How and when it's rendered)
In this project I use some React Hooks such as useState, useEffect, useRef, useId, useMemo, useCallback, useTransition, useDefferedValue, and I also add a simple Custom Hook. Fyi, useMemo iss for memorized variable, and if you want to memorized a component, you can use memo() in your component, you can see how implementing memo() on Second Child Component.
Then, I also implementing AbortController or CancelToken (on axios), i add the explanation on commented sentences in the project, how and why we should using it. This picture below is just example when the fetching is canceled because i click Get Data Comments and after that straight to click Get Data Photos (i change get data photos to albums due to bandwidth usage)
See the commented sentences and the console.log to know how and when the element rendered, or to know how and when the function executed/called. Or you can just open Conclusion.txt to see the conclusion of The React hooks on this project.
You all can see the project on here: https://react-hooks-lifecycle.netlify.app/