Life Cyrcle
React-native
Component’s lifecycle
• A component’s lifecycle can be divided into 4
parts:
• Mounting— an instance of a component is being
created and inserted into the DOM.
• Updating — when the React component is born in
the browser and grows by receiving new updates.
• Unmounting—the component is not needed and
gets unmounted.
• Error handling—called when there is an error
during rendering, in a lifecycle method, or in the
constructor of any child component.
Mounting
• These methods are called in the following
order when an instance of a component is
being created and inserted into the DOM:
• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()
Updating
• An update can be caused by changes to props
or state. These methods are called in the
following order when a component is re-
rendered:
• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()
Unmounting
• This method is called when a component is
removed from the DOM:
• componentWillUnmount()
Error Handling
• These methods are called when there is an
error during rendering, in a lifecycle method, or
in the constructor of any child component.
• static getDerivedStateFromError()
• componentDidCatch()
Life Cyrcle.pptx

Life Cyrcle.pptx

  • 1.
  • 2.
    Component’s lifecycle • Acomponent’s lifecycle can be divided into 4 parts: • Mounting— an instance of a component is being created and inserted into the DOM. • Updating — when the React component is born in the browser and grows by receiving new updates. • Unmounting—the component is not needed and gets unmounted. • Error handling—called when there is an error during rendering, in a lifecycle method, or in the constructor of any child component.
  • 3.
    Mounting • These methodsare called in the following order when an instance of a component is being created and inserted into the DOM: • constructor() • static getDerivedStateFromProps() • render() • componentDidMount()
  • 4.
    Updating • An updatecan be caused by changes to props or state. These methods are called in the following order when a component is re- rendered: • static getDerivedStateFromProps() • shouldComponentUpdate() • render() • getSnapshotBeforeUpdate() • componentDidUpdate()
  • 5.
    Unmounting • This methodis called when a component is removed from the DOM: • componentWillUnmount()
  • 6.
    Error Handling • Thesemethods are called when there is an error during rendering, in a lifecycle method, or in the constructor of any child component. • static getDerivedStateFromError() • componentDidCatch()