React LifeCycle Component

LifeCycle Component only available in class- based components. You can not use them as a Functional or Presentational Component. Because you have to handle state in the component. We can implement different functions at different times with these components. We can use that when we get our fetch data from the server or do when we need to move something from the DOM. We will talk about how we can use the LifeCycle Component efficiently in our React Application in this article. We will also talk about how we can implement the LifeCycle component in our application as well.

Component Lifecycle- Creation

We have to distinguish something when we try to make some changes from our React application. We call that “Lifecycle Hooks”. But this is not related to “React Hooks”.

What is the constructor(props) there for ?

The constructor just describes how we will initialize our function. We should initialize our state in constructor to avoid side effects. You can have trouble, if you try to implement your fetch in the constructor and try to store some data or make a HTTP request. We call this kind of problem a side effect. You can face an error on your browser when you implement this kind of function in your constructor. It will also affect your application performance and you can waste some time debugging bugs in your application. One of the best uses of constructor is to define the initial state of the component, which is very useful for any react.js application. We can also bind any event that occurs in our component in the constructor like the following.

EXAMPLE

The constructor method is called, by React, every time you make a component:

getDerivedStateFromProps(props,state):

This lifecycle hook is released in React 16.3. When every of your props change for the class component, you can synchronize state with this. When you want to update your internal state of the component, you can use this hook. To avoid side effects in your component, You should not send HTTP requests here. Instead of calling setState like in the first example, getDerivedStateFromProps simply returns an object containing the updated state. Notice that the function has no side-effects; this is intentional.getDerivedStateFromProps may be called multiple times for a single update, so it’s important to avoid any side-effects. Instead, you should use componentDidUpdate, which executes only once after the component updates.

render():

Render is returning some JSX in your application and showing it on DOM. As you know React has a great feature called Virtual DOM. The advantage of Virtual DOM is wherever you are trying to update a DOM with some data as text or creating a component with adding and removing elements, You can see that on DOM while you are working on your application at the same time. You should only use it only to prepare the data as you need it. Lay out your JSX code and to render the HTML code. You should send an HTTP request or set a timeout.

Now, you have created your first ever React Element and also have rendered it in place, but React was not developed to create static pages, the intention of using React is to create a more logical and active webpage. In order to do so, we will need to update the elements.

Updating an Element in React: React Elements are immutable i.e. once an element is created it is impossible to update its children or attribute. Thus, in order to update an element, we must use the render() method several times to update the value over time. Let’s see this in an example.

Render Child Components

When render runs and you render any other React component in this class-based component then these child components will now be rendered. Every child component you included in your rendered component here will rendered as well. Only all child components were rendered and their lifecycle looks finished, lifecycle will finish for the creation when componentDidMount gets called

componentDidMount()

This method is very important lifecycle hook which you’ll use a lot when you’re working with class-based components. It can cause side effects. This is a typical hook would use for making HTTP request to get data from the web. You should not update the state here , so don’t call setState here unless after promise.You can update the state after you get response from the server. But don’t call it right away and don’t call the set state in here synchronously. Because that will trigger re-render and it will be a problem for performance.

As the name suggests, after all the elements of the page are rendered correctly, this method is called. After the markup is set on the page, this technique is called by React itself to either fetch the data from An External API or perform some unique operations which need the JSX elements.

componentDidMount() method is the perfect place, where we can call the setState() method to change the state of our application and render() the updated data loaded JSX. For example, we are going to fetch any data from an API then an API call should be placed in this lifecycle method, and then we get the response, we can call the setState() method and render the element with updated data.

componentDidCatch ()

The componentDidCatch() method is invoked if some error occurs during the rendering phase of any lifecycle methods or any children components. This method is used to implement the Error Boundaries for the React application. It is called during the commit phase, so unlike getDerivedStateFromError() which was called during the render phase, side-effects are allowed in this method. This method is also used to log errors.

Error Boundaries

Error Boundaries actually aren’t in direct competition with try…catch statements. Error Boundaries are only designed for intercepting errors that originate from 3 places in a React component:

  • During render phase
  • In a lifecycle method
  • In the constructor

Basically… the React-y parts of a component. As a counterpoint, these are the places where Error Boundaries won’t be able to catch an error:

  • Event handlers (eg., onClick, onChange, etc.)
  • setTimeout or requestAnimationFramecallbacks
  • Server-side rendering (SSR)
  • And errors causesd by the error boundary itself (rather than its children)

So Error Boundaries don’t really impact how you use try…catch. They’re both needed as a robust strategy for handling errors in React.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Soner Mezgitci

Software Engineer | Ruby on Rails | JavaScript | HTML5 | CSS | PostgreSQL | React | Redux