{"id":731,"date":"2024-02-02T09:39:22","date_gmt":"2024-02-02T09:39:22","guid":{"rendered":"https:\/\/www.cmsgalaxy.com\/blog\/?p=731"},"modified":"2024-02-05T11:08:36","modified_gmt":"2024-02-05T11:08:36","slug":"useeffect-useref-usecallback-hooks-in-react-js","status":"publish","type":"post","link":"https:\/\/www.cmsgalaxy.com\/blog\/useeffect-useref-usecallback-hooks-in-react-js\/","title":{"rendered":"useEffect, useRef, useCallback hooks in React.js"},"content":{"rendered":"\n
    \n
  1. useEffect:<\/strong>
    The useEffect<\/code> hook is used to perform side effects in functional components. It’s similar to lifecycle methods such as componentDidMount<\/code>, componentDidUpdate<\/code>, and componentWillUnmount<\/code> in class components. Example:<\/li>\n<\/ol>\n\n\n\n
       import React, { useState, useEffect } from 'react';\n\n   function Example() {\n       const [count, setCount] = useState(0);\n\n       useEffect(() => {\n           \/\/ This function will run after every render\n           document.title = `You clicked ${count} times`;\n       });\n\n       return (\n           <div>\n               <p>Count: {count}<\/p>\n               <button onClick={() => setCount(count + 1)}>Increment<\/button>\n           <\/div>\n       );\n   }<\/code><\/pre>\n\n\n\n
      \n
    1. useRef:<\/strong>
      The useRef<\/code> hook is used to create a mutable reference that persists across renders. It’s useful for accessing and interacting with DOM elements, as well as storing mutable values that don’t trigger re-renders. Example:<\/li>\n<\/ol>\n\n\n\n
         import React, { useRef } from 'react';\n\n   function TextInputWithFocusButton() {\n       const inputRef = useRef(null);\n\n       const handleClick = () => {\n           \/\/ Focus on the input element when the button is clicked\n           inputRef.current.focus();\n       };\n\n       return (\n           <div>\n               <input ref={inputRef} type=\"text\" \/>\n               <button onClick={handleClick}>Focus Input<\/button>\n           <\/div>\n       );\n   }<\/code><\/pre>\n\n\n\n
        \n
      1. useCallback:<\/strong>
        The useCallback<\/code> hook is used to memoize functions, preventing unnecessary re-renders of components that depend on those functions. It’s particularly useful for optimizing performance when passing callbacks to child components. Example:<\/li>\n<\/ol>\n\n\n\n
           import React, { useState, useCallback } from 'react';\n\n   function ParentComponent() {\n       const [count, setCount] = useState(0);\n\n       \/\/ Define a memoized callback function\n       const handleClick = useCallback(() => {\n           setCount(count + 1);\n       }, [count]);\n\n       return (\n           <div>\n               <p>Count: {count}<\/p>\n               <ChildComponent onClick={handleClick} \/>\n           <\/div>\n       );\n   }\n\n   function ChildComponent({ onClick }) {\n       return (\n           <button onClick={onClick}>Increment<\/button>\n       );\n   }<\/code><\/pre>\n\n\n\n
        These are just a few examples of how you can use useEffect<\/code>, useRef<\/code>, and useCallback<\/code> hooks in React to handle side effects, manage references, and optimize performance. Each hook serves a specific purpose and can be used to enhance the functionality and efficiency of your React components.<\/p>\n","protected":false},"excerpt":{"rendered":"
        These are just a few examples of how you can use useEffect, useRef, and useCallback hooks in React to handle<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-731","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/731","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/comments?post=731"}],"version-history":[{"count":1,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/731\/revisions"}],"predecessor-version":[{"id":732,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/731\/revisions\/732"}],"wp:attachment":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/media?parent=731"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/categories?post=731"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/tags?post=731"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}