https://github.com/petekgithub/component-lifecycle
Example of ReactJS Component Lifecycle
https://github.com/petekgithub/component-lifecycle
component component-lifecycle reactjs
Last synced: 12 months ago
JSON representation
Example of ReactJS Component Lifecycle
- Host: GitHub
- URL: https://github.com/petekgithub/component-lifecycle
- Owner: petekgithub
- Created: 2022-08-14T19:37:53.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-08-14T21:39:02.000Z (over 3 years ago)
- Last Synced: 2025-01-01T01:45:20.641Z (about 1 year ago)
- Topics: component, component-lifecycle, reactjs
- Language: HTML
- Homepage: https://codesandbox.io/s/github/petekgithub/component-lifecycle
- Size: 205 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Component-lifecycle
- Component didMount
```
useEffect(() => {
console.log("The useEffect ran");
}, []);
```
When I open at the console, useEffect will run but when I click the increment button useEffect will not run and also when I click the hide button, the useEffect will not run again. This empty array will tell you, when the useEffect should run, you only want it to run when the first render is and after that because the array is empty, it will not re-run and it will not dependent on anything else happen.
- Component didUpdate
```
useEffect(() => {
console.log("The useEffect ran");
}, [counter]);
```
When I open at the console, useEffect will run and when I click the increment button useEffect will run again. useEffect will always run because we are passing in a variable that our useEffect depends on. It will only recall this if the variable in this array update
- Component WilllUnmount
```
useEffect(() => {
console.log("The useEffect ran");
return () => {
console.log("the return is run");
};
}, []);
```