{"id":5075,"date":"2025-03-05T17:01:37","date_gmt":"2025-03-05T11:31:37","guid":{"rendered":"https:\/\/namastedev.com\/blog\/?p=5075"},"modified":"2025-03-05T17:01:37","modified_gmt":"2025-03-05T11:31:37","slug":"learning-commonly-used-react-hooks","status":"publish","type":"post","link":"https:\/\/namastedev.com\/blog\/learning-commonly-used-react-hooks\/","title":{"rendered":"Learning Commonly Used React Hooks"},"content":{"rendered":"

React hook are special functions that let you “hook into” react features like state and life-cycle methods in functional components . before hooks , these features were only available in class components . hooks make it easier to write and manage it easier to write <\/span><\/p>\n

and manage react code.<\/span><\/p>\n

<\/p>\n

useState() <\/span><\/h2>\n

The useState is a react hook which help manage state of variables and we can update the state of that variable as well . <\/span><\/p>\n

<\/p>\n

useEffect()<\/span><\/h2>\n

the useEffect refresh the web page after every change in web page . it mostly use in event handling whenever there is an update in a web page so that it can display the changes after an event.<\/span><\/p>\n

<\/h2>\n

useContext()<\/span><\/h2>\n

It is use to create a context so that we can access all the variables and functions across the component tree and aviod props driling. lets you access data from react context.<\/span><\/p>\n

<\/h2>\n

useReducer()<\/span><\/h2>\n

Manages complex state logic using a reducer function . A function that takes the current state and an action, and returned a new state. a more advanced way to manage state , especially for complex logic.<\/span><\/p>\n

<\/p>\n

useCallback()<\/span><\/h2>\n

Memorizes a callback function to prevent unnecessary re-renders . Usefull when passing callbacks to child components to optimize performance<\/span><\/p>\n

<\/p>\n

<\/p>\n

useMemo()<\/span><\/h2>\n

Memorize a value to avoid expensive calculations on every render.<\/span><\/p>\n

<\/p>\n

useRef()<\/span><\/h2>\n

Create a mutable object that persists across renders.<\/span><\/p>\n

<\/p>\n

<\/p>\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

React hook are special functions that let you “hook into” react features like state and life-cycle methods in functional components . before hooks , these features were only available in class components . hooks make it easier to write and manage it easier to write and manage react code. useState() The useState is a react<\/p>\n","protected":false},"author":63,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[172,263,355,170],"tags":[224,357,223,358],"class_list":["post-5075","post","type-post","status-publish","format-standard","category-javascript","category-javascript-frameworks","category-react19","category-reactjs","tag-react","tag-react19","tag-reactjs","tag-reactjs19"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/5075","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/users\/63"}],"replies":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/comments?post=5075"}],"version-history":[{"count":1,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/5075\/revisions"}],"predecessor-version":[{"id":5086,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/5075\/revisions\/5086"}],"wp:attachment":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/media?parent=5075"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/categories?post=5075"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/tags?post=5075"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}