ReactJS lifecycle method inside a function Component

Question

Instead of writing my components inside a class  I d like to use the function syntax  How do I override componentDidMount  componentWillMount inside function components  Is it even possible  const grid    props    gt        console log props       let  skuRules    props       const componentDidMount        gt            if  props fetched                props fetchRules                      console log  mount it                return           lt Content title  quot Promotions quot  breadcrumbs  breadcrumbs  fetched  skuRules fetched  gt               lt Box title  quot Sku Promotion quot  gt                   lt ActionButtons buttons  actionButtons    gt                   lt SkuRuleGrid                      data  skuRules payload                      fetch  props fetchSkuRules                    gt               lt  Box gt                 lt  Content gt

User · Answer

if you using react 16 8 you can use react Hooks    React Hooks are functions that let you    hook into    React state and lifecycle features from function components    docs

User · Answer

If you need use React LifeCycle  you need use Class   Sample   import React    Component   from  react    class Grid extends Component     constructor props     super props       componentDidMount         do something        render          return  lt h1 gt Hello lt  h1 gt

User · Answer

You can make use of create-react-class module  Official documentation  Of course you must first install it  npm install create-react-class   Here is a working example  import React from  react   import ReactDOM from  react-dom  let createReactClass   require  create-react-class     let Clock   createReactClass       getInitialState function            return  date new Date                render function            return                lt h1 gt  this state date toLocaleTimeString    lt  h1 gt                        componentDidMount function            this timerId   setInterval     gt this setState  date new Date     1000              componentWillUnmount function            clearInterval this timerId             ReactDOM render       lt Clock  gt       document getElementById  root

User · Answer

According to the documentation   import React    useState  useEffect   from  react     Similar to componentDidMount and componentDidUpdate   useEffect      gt            see React documentation

User · Answer

Edit  With the introduction of Hooks it is possible to implement a lifecycle kind of behavior as well as the state in the functional Components  Currently      Hooks are a new feature proposal that lets you use state and other   React features without writing a class  They are released in React as a part of v16 8 0   useEffect hook can be used to replicate lifecycle behavior  and useState can be used to store state in a function component   Basic syntax    useEffect callbackFunction   dependentProps     gt  cleanupFunction   You can implement your use case in hooks like  const grid    props    gt        console log props       let  skuRules    props       useEffect      gt            if  props fetched                props fetchRules                      console log  mount it                    passing an empty array as second argument triggers the callback in useEffect only after the initial render thus replicating  componentDidMount  lifecycle behaviour      return           lt Content title  Promotions  breadcrumbs  breadcrumbs  fetched  skuRules fetched  gt               lt Box title  Sku Promotion  gt                   lt ActionButtons buttons  actionButtons    gt                   lt SkuRuleGrid                      data  skuRules payload                      fetch  props fetchSkuRules                    gt               lt  Box gt                 lt  Content gt              useEffect can also return a function that will be run when the component is unmounted  This can be used to unsubscribe to listeners  replicating the behavior of componentWillUnmount   Eg  componentWillUnmount  useEffect      gt        window addEventListener  unhandledRejection   handler       return      gt           window removeEventListener  unhandledRejection   handler                  To make useEffect conditional on specific events  you may provide it with an array of values to check for changes   Eg  componentDidUpdate  componentDidUpdate prevProps  prevState         const   counter     this props       if  this props counter     prevState counter             some action here            Hooks Equivalent  useEffect      gt            action here     props counter       checks for changes in the values in this array   If you include this array  make sure to include all values from the component scope that change over time  props  state   or you may end up referencing values from previous renders   There are some subtleties to using useEffect  check out the API Here     Before v16 7 0  The property of function components is that they don t have access to Reacts lifecycle functions or the this keyword  You need to extend the React Component class if you want to use the lifecycle function   class Grid extends React Component        constructor props           super props             componentDidMount              if  this props fetched                this props fetchRules                      console log  mount it               render         return           lt Content title  Promotions  breadcrumbs  breadcrumbs  fetched  skuRules fetched  gt               lt Box title  Sku Promotion  gt                   lt ActionButtons buttons  actionButtons    gt                   lt SkuRuleGrid                      data  skuRules payload                      fetch  props fetchSkuRules                    gt               lt  Box gt                 lt  Content gt                  Function components are useful when you only want to render your Component without the need of extra logic

User · Answer

You can make your own  quot lifecycle methods quot  using hooks for maximum nostalgia  Utility functions  import   useEffect  useRef   from  quot react quot    export const useComponentDidMount   handler   gt      return useEffect      gt        return handler                  export const useComponentDidUpdate    handler  deps    gt      const isInitialMount   useRef true      useEffect      gt        if  isInitialMount current          isInitialMount current   false         return             return handler         deps       Usage  import   useComponentDidMount  useComponentDidUpdate   from  quot   utils quot    export const MyComponent      myProp      gt      useComponentDidMount      gt        console log  quot Component did mount  quot             useComponentDidUpdate      gt        console log  quot Component did update  quot             useComponentDidUpdate      gt        console log  quot myProp did update  quot          myProp

User · Answer

Solution One  You can use new react HOOKS API  Currently in React v16 8 0  Hooks let you use more of React   s features without classes  Hooks provide a more direct API to the React concepts you already know  props  state  context  refs  and lifecycle  Hooks solves all the problems addressed with Recompose   A Note from the Author of recompose  acdlite  Oct 25 2018       Hi  I created Recompose about three years ago  About a year after   that  I joined the React team  Today  we announced a proposal for   Hooks  Hooks solves all the problems I attempted to address with   Recompose three years ago  and more on top of that  I will be   discontinuing active maintenance of this package  excluding perhaps   bugfixes or patches for compatibility with future React releases   and   recommending that people use Hooks instead  Your existing code with   Recompose will still work  just don t expect any new features    Solution Two   If you are using react version that does not support hooks  no worries  use recompose A React utility belt for function components and higher-order components   instead  You can use recompose for attaching lifecycle hooks  state  handlers etc to a function component   Here   s a render-less component that attaches lifecycle methods via the lifecycle HOC  from recompose       taken from https   gist github com tsnieman 056af4bb9e87748c514d file-auth-js-L33  function RenderlessComponent       return null      export default lifecycle      componentDidMount         const   checkIfAuthed     this props         Do they have an active session    Remember me       checkIfAuthed            componentWillReceiveProps nextProps        const         loadUser          this props          Various  indicators        const becameAuthed      this props auth   amp  amp  nextProps auth       const isCurrentUser    this props currentUser     null        if  becameAuthed          loadUser nextProps auth uid              const shouldSetCurrentUser     isCurrentUser  amp  amp  nextProps auth       if  shouldSetCurrentUser          const currentUser   nextProps users nextProps auth uid         if  currentUser            this props setCurrentUser              id   nextProps auth uid               currentUser                                   RenderlessComponent

User · Answer

You can use react-pure-lifecycle to add lifecycle functions to functional components   Example   import React    Component   from  react   import lifecycle from  react-pure-lifecycle    const methods       componentDidMount props        console log  I mounted  Here are my props     props           const Channels   props   gt     lt h1 gt Hello lt  h1 gt     export default lifecycle methods  Channels

[reactjs] ReactJS lifecycle method inside a function Component

Examples related to reactjs

Examples related to redux