All rights are reserved by Niteesh Kumar.. Theme images by Storman. Powered by Blogger.

Followers

Total Pageviews

Blog Archive

Translate

Thursday, 16 December 2021

React hooks interview Questions

What are React hooks?

Before hooks class based components were being used for state or lifecycle methods. 

Hooks are functions which allows you to hook state and lifecycle methods to Functional components.


Why React  hooks?

  • It's a different way of doing the same thing we do with class based component.
  • Code is much simpler here.
  • no more lifecycle methods.
  • We can use useSelector and useDispatch instead of mapStateToProps and mapDispatchToProps.

Rules of React Hooks?
  • Call hooks at top level.
  • don't call hooks inside loops, Conditins or nested functions.
  • Call React hooks from React component , other hooks not from the normal function

Map lifecycle methods Class to hooks lifecycle?

  • Initial Render
    getDerivedStateFromProps()
       useEffect(()=>{},[prop1,prop2])
    componentDidMount()
       useEffect(()=>{},[])

  • Update
     getDerivedStateFromProps()
       useEffect(()=>{},[prop1,prop2])

    ShouldComponentUpdate()
       useMemo()
    
    componentDidUpdate()
     getDerivedStateFromProps()
       useEffect(()=>{})

    getSnapShotbeforeUpdate()
    //custom hook to hold the previous state. 
  • Unmount
       useEffect(()=>{return function(){}})


How to upgrade Class to functional Components?

Update React and React-dom version.
update one route at a time.

How to debug hooks?

 use Console.log, console.debug, useDebugValue, Chrome debugger.

0 on: "React hooks interview Questions"