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.