React Functional Component Lifecycle
React Functional Component Lifecycle

React Functional Component Lifecycle

Taib Islam Dipu Taib Islam Dipu

Taib Islam Dipu

?? Frontend Developer | NextJS | JavaScript | MERN | Full-Stack

发布日期: 2021年12月19日
+ 关注

This blog will explain the lifecycle of a reacts functional component with examples. We will learn from this blog how things work in the background when a React App is run.

1. When a react app is run on the functional component of React, it first loads the imports of those components.

Import image

2. Once the imports are loaded, it goes to the export default at the very end to find out where this component will start from or what its root point is.

export default

3. After moving to?the root location of the component, it starts initializing the values of the variable as we use useState, or there may be another variable, data destructuring from any props. I have only useState here, there may be props, Context API or Redux.

initializing the values

4. After initializing the variables, it goes directly to the return() function and inside the return() is usually written what is to be shown in the UI such as JSX code or what is being returned from this function.

Inside the return, data is usually loaded from the API, and useEffect() hooks are used to load this data. But since the react app has not loaded useEffect yet, at this stage usually a condition is checked by loading. As if the page waits until the data is loaded and shows that the data when loading is done. See line number 47.

return() function

5. Finally it goes to useEffect() and loads the data from the API. Also if there is any dependency in useEffect then call API again according to that dependency.

useEffect()

Thank you for reading. Give a like if you find this content useful.

要查看或添加评论，请登录

社区洞察

其他会员也浏览了