Reading list Switch to dark mode

    Guide on the React Hooks

    Updated 30 April 2023

    In this blog we’re going to talk Hooks of reactJS , and their working and use cases. first of all , why we need hooks.
    Hooks are built in React functions which introduced in react version16.8.
    which allow developers to use react features like lifecycle methods, state, and context etc in the functional components.

    Benefits of using Hooks.

    1. Using classes in react always quite confusing , as developer you need to constantly remember to bind event handlers and manage of this keyword in class component is also confusing.
    2. Hooks code look shorter and also better in readability and it’s far more easy to work with hooks in functional component.

    Rules of using react Hooks.

    1. Call Hooks at the top level of a component.
    2. Call Hooks in react functional component.

    Common React Hooks

    • useState
    • useEffect
    • use-Context

    useState Hook

    useState is used to manipulate the state or you can say value in the functional component, setState method will update the value of state and also done the re rendering of the functional component

    const [state, setState] = useState(false);

    useEffect Hook

    useEffect is same as the componentDidMount , componentDidUpdate and componentWillUnMount life cycle methods all combined in one function, This acts us lifecycle methods in functional component.
    In useEffect() method we define dependency array in which we define values, when the value of dependency array change , it cause the re-rendering of the useEffect(), and if you place empty array then it will call itself all the time.

    useEffect(() => {
     // Write your logic here
    },[ ])
    // dependency array

    useContext Hook

    useContext Hooks make the state and data global accessible to all components by using context ,you can resolve problems like props drilling. it acts as a replaceable of redux when it’s comes for small projects of reactjs , for read more about the useContext check its offical documentation.
    https://legacy.reactjs.org/docs/hooks-reference.html#usecontext

    const value = useContext(MyContext);
    
    That's all for this blog, If you like this blog you can check my other works also.
    <a href="https://webkul.com/blog/how-to-implement-authentication-using-nextjs-middleware/">How to Implement Authetication using nextjs middleware</a>
    
    Happy Coding !!

    Start your headless eCommerce
    now.
    Find out More
    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home