[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"sanity-Y8Mq1DMFobJbbySlBc96cpF--R5zQ4sXUY_CtBH2zdE":3,"sanity-yAs8hu2HIyqNquErlY2nzIrtWK66J2V-4t9_x245pKw":678},{"data":4,"sourceMap":-1},{"latestPodcast":5,"latestReleases":14,"post":39,"recent":653},[6],{"_id":7,"publishedAt":8,"slug":9,"sponsored":12,"title":13},"d52b334e-4233-4e7d-a10b-bfba1472c2fb","2026-07-07T07:40:00.000Z",{"_type":10,"current":11},"slug","agent-orchestration-is-so-two-years-ago",null," Agent orchestration is so two-years ago",[15,21,27,33],{"_id":16,"publishedAt":17,"slug":18,"title":20},"eb5b66eb-9410-4329-83bb-22bbff39402a","2026-04-28T13:00:00.000Z",{"_type":10,"current":19},"turn-scattered-knowledge-into-trusted-intelligence","Turning scattered knowledge into trusted intelligence: Stack Internal 2026.3",{"_id":22,"publishedAt":23,"slug":24,"title":26},"369c2401-b62e-4a37-8ff8-bf603023ecad","2026-03-02T15:03:00.988Z",{"_type":10,"current":25},"what-s-new-at-stack-overflow-march-2026","What’s new at Stack Overflow: March 2026",{"_id":28,"publishedAt":29,"slug":30,"title":32},"5e9053a4-07ea-447c-91ea-29e0b6228537","2026-02-02T15:00:00.000Z",{"_type":10,"current":31},"what-s-new-at-stack-overflow-february-2026","What’s new at Stack Overflow: February 2026",{"_id":34,"publishedAt":35,"slug":36,"title":38},"a1b538eb-a8a6-46d0-80a1-ac70ec9bb935","2026-01-05T10:00:00.000-05:00",{"_type":10,"current":37},"what-s-new-at-stack-overflow-january-2026","What’s new at Stack Overflow: January 2026",{"_createdAt":40,"_id":41,"_rev":42,"_type":43,"_updatedAt":44,"author":45,"body":56,"comments":617,"dateUrl":618,"excerpt":619,"image":620,"legacyBody":623,"product":12,"publishedAt":626,"slug":627,"sponsored":12,"tags":629,"title":652,"visible":617},"2023-05-24T12:50:56Z","wp-post-18951","dgl3SCUzppW3U2LvCoSytY","blogPost","2023-07-13T14:56:07Z",[46],{"_createdAt":47,"_id":48,"_rev":49,"_type":50,"_updatedAt":47,"avatar":12,"bio":51,"employee":52,"name":53,"slug":54},"2023-05-23T16:27:18Z","wp-author-cap-18954","9HpbCsT2tq0xwozQfkcuVr","blogAuthor","I’m Doro Onome, a skilled software developer and technical writer with a passion for open source. I aim at working towards a good customer experience","none","Doro Onome",{"current":55},"doro-onome",[57,91,99,108,116,124,128,136,139,147,163,171,179,187,197,205,213,221,229,237,253,256,280,283,333,341,349,355,363,371,386,402,417,420,450,464,477,491,499,511,523,546,558,570,582,600,609],{"_key":58,"_type":59,"children":60,"markDefs":84,"style":90},"9f1db775c8ff","block",[61,66,71,75,80],{"_key":62,"_type":63,"marks":64,"text":65},"9f1db775c8ff0","span",[],"React is ",{"_key":67,"_type":63,"marks":68,"text":70},"9f1db775c8ff1",[69],"48cba0659512","the most popular front-end framework",{"_key":72,"_type":63,"marks":73,"text":74},"9f1db775c8ff2",[]," in the ",{"_key":76,"_type":63,"marks":77,"text":79},"9f1db775c8ff3",[78],"e33fef57da2f","JavaScript ecosystem",{"_key":81,"_type":63,"marks":82,"text":83},"9f1db775c8ff4",[],". It is famous for its ease of use and its readability, allowing companies and startups to adopt it. But classes can be unwieldy and hard to understand. Hooks allow you to use state, lifecycle methods, and other functionalities of React without using classes.",[85,88],{"_key":69,"_type":86,"href":87,"reference":12},"link","https:\u002F\u002Finsights.stackoverflow.com\u002Fsurvey\u002F2021#section-most-popular-technologies-web-frameworks",{"_key":78,"_type":86,"href":89,"reference":12},"https:\u002F\u002Fstackoverflow.blog\u002F2018\u002F01\u002F11\u002Fbrutal-lifecycle-javascript-frameworks\u002F","normal",{"_key":92,"_type":59,"children":93,"markDefs":98,"style":90},"81d1a231865c",[94],{"_key":95,"_type":63,"marks":96,"text":97},"81d1a231865c0",[],"This article will explain what hooks are, what makes them unique, and why they are the best thing to happen to React.",[],{"_key":100,"_type":59,"children":101,"markDefs":106,"style":107},"53c8acb6ec4c",[102],{"_key":103,"_type":63,"marks":104,"text":105},"53c8acb6ec4c0",[],"The origin of React hooks",[],"h2",{"_key":109,"_type":59,"children":110,"markDefs":115,"style":90},"c65ad365f56d",[111],{"_key":112,"_type":63,"marks":113,"text":114},"c65ad365f56d0",[],"Originally, React mainly used class components, which can be strenuous at times as you always had to switch between classes, higher-order components, and render props. With React hooks, you can now do all these without switching, using functional components. Hooks make React so much better because you have simpler code that implements similar functionalities faster and more effectively. You can also implement React state and lifecycle methods without writing classes.",[],{"_key":117,"_type":59,"children":118,"markDefs":123,"style":90},"fe7390e492a8",[119],{"_key":120,"_type":63,"marks":121,"text":122},"fe7390e492a80",[],"Below are code examples to illustrate React class and functional components.",[],{"_key":125,"_type":126,"code":127,"markDefs":12},"399eb075cf18","code","import React, { Component } from 'react'\n \nexport default class Hello extends Component {\n    render() {\n        return(\n            \u003Cdiv>\n            Hello World!\n            \u003C\u002Fdiv>\n        )\n    }\n}\n",{"_key":129,"_type":59,"children":130,"markDefs":135,"style":90},"ef38bb5564c1",[131],{"_key":132,"_type":63,"marks":133,"text":134},"ef38bb5564c10",[],"The code above is a class component that prints “Hello World” in the DOM.",[],{"_key":137,"_type":126,"code":138,"markDefs":12},"0dada2b8fbd3","import React from 'react'\n \nexport default function Hello() {\n    return (\n        \u003Cdiv>\n            Hello World!\n        \u003C\u002Fdiv>\n    )\n}\n",{"_key":140,"_type":59,"children":141,"markDefs":146,"style":90},"826b0d5494ec",[142],{"_key":143,"_type":63,"marks":144,"text":145},"826b0d5494ec0",[],"The code above is a functional component that prints “Hello World” on the DOM.",[],{"_key":148,"_type":59,"children":149,"markDefs":162,"style":90},"8f5ff75c56af",[150,154,158],{"_key":151,"_type":63,"marks":152,"text":153},"8f5ff75c56af0",[],"Comparing both sets of code above, the functional component has significantly simpler code that performs the same function; there’s no need to allocate space to a class instance, then call a ",{"_key":155,"_type":63,"marks":156,"text":157},"8f5ff75c56af1",[126],"render()",{"_key":159,"_type":63,"marks":160,"text":161},"8f5ff75c56af2",[]," function, you just call the function. React hooks have so many benefits and functions they perform, but one of the big ones is to make the React lifecycle methods easier.",[],{"_key":164,"_type":59,"children":165,"markDefs":170,"style":90},"ddc88ce32717",[166],{"_key":167,"_type":63,"marks":168,"text":169},"ddc88ce327170",[],"NOTE: You cannot use React hooks on class components.",[],{"_key":172,"_type":59,"children":173,"markDefs":178,"style":107},"bfe8fae40750",[174],{"_key":175,"_type":63,"marks":176,"text":177},"bfe8fae407500",[],"How have hooks made the React lifecycle easier?",[],{"_key":180,"_type":59,"children":181,"markDefs":186,"style":90},"d3a0448dd66f",[182],{"_key":183,"_type":63,"marks":184,"text":185},"d3a0448dd66f0",[],"The various lifecycle methods in React include mounting, updating, and unmounting.",[],{"_key":188,"_type":59,"children":189,"level":194,"listItem":195,"markDefs":196,"style":90},"2e50f1657ced",[190],{"_key":191,"_type":63,"marks":192,"text":193},"2e50f1657ced0",[],"Mounting inserts elements into the DOM.",1,"bullet",[],{"_key":198,"_type":59,"children":199,"level":194,"listItem":195,"markDefs":204,"style":90},"1fa93f49a1f7",[200],{"_key":201,"_type":63,"marks":202,"text":203},"1fa93f49a1f70",[],"Updating as the name implies, updates elements in the DOM.",[],{"_key":206,"_type":59,"children":207,"level":194,"listItem":195,"markDefs":212,"style":90},"834c678b60c1",[208],{"_key":209,"_type":63,"marks":210,"text":211},"834c678b60c10",[],"Unmounting removes elements from the DOM.",[],{"_key":214,"_type":59,"children":215,"markDefs":220,"style":90},"1132bd50c8dd",[216],{"_key":217,"_type":63,"marks":218,"text":219},"1132bd50c8dd0",[],"Below is an illustration of the various React lifecycle methods:",[],{"_key":222,"_type":223,"alt":224,"asset":225,"caption":228,"markDefs":12},"a4071ef8b7f4","image","A graph that shows how mounting, updating, and unmounting work in the render, pre-commit, and commit phases. ",{"_ref":226,"_type":227},"image-2cb5f4b116b3294fb9140506cb0e7dd952b1ce0c-1600x876-jpg","reference","Image from Understanding the React Lifecycle Methods",{"_key":230,"_type":59,"children":231,"markDefs":236,"style":90},"9ad149f2ad32",[232],{"_key":233,"_type":63,"marks":234,"text":235},"9ad149f2ad320",[],"Initially, you could only use these lifecycle methods with class components, which usually comprise a lot of carefully engineered code that is more difficult to write or understand than when you use hooks to implement them as functional components.",[],{"_key":238,"_type":59,"children":239,"markDefs":252,"style":90},"17f1fca7ec0a",[240,244,248],{"_key":241,"_type":63,"marks":242,"text":243},"17f1fca7ec0a0",[],"Take, for instance, if you try to fetch user data using a ",{"_key":245,"_type":63,"marks":246,"text":247},"17f1fca7ec0a1",[126],"componentDidMount()",{"_key":249,"_type":63,"marks":250,"text":251},"17f1fca7ec0a2",[]," in a class component like in the code below:",[],{"_key":254,"_type":126,"code":255,"markDefs":12},"eb9bf93025fe","import React, { Component } from 'react'\nimport Axios from 'axios'\n \nexport default class Hello extends Component {\n \n    constructor(props) {\n        super(props);\n        this.state = { name: \"\"};\n    }\n \n    componentDidMount() {\n        Axios.get('\u002Fapi\u002Fuser\u002Fname')\n        .then(response => {\n            this.setState({ name: response.data.name })\n        })\n    }\n \n    render() {\n        return (\n            \u003Cdiv>\n                My name is {this.state.name}\n            \u003C\u002Fdiv>\n        )\n    }\n}\n",{"_key":257,"_type":59,"children":258,"markDefs":279,"style":90},"4cedc2c66190",[259,263,267,271,275],{"_key":260,"_type":63,"marks":261,"text":262},"4cedc2c661900",[],"Now let’s compare it to doing the same thing with a functional component by using the ",{"_key":264,"_type":63,"marks":265,"text":266},"4cedc2c661901",[126],"useState",{"_key":268,"_type":63,"marks":269,"text":270},"4cedc2c661902",[]," and ",{"_key":272,"_type":63,"marks":273,"text":274},"4cedc2c661903",[126],"useEffect",{"_key":276,"_type":63,"marks":277,"text":278},"4cedc2c661904",[]," hooks in the code below:",[],{"_key":281,"_type":126,"code":282,"markDefs":12},"3dd222f157ee","import React, { useEffect, useState } from 'react'\nimport Axios from 'axios'\n \nexport default function Hello() {\n \n    const [Name, setName] = useState(\"\")\n \n    useEffect(() => {\n        Axios.get('\u002Fapi\u002Fuser\u002Fname')\n        .then(response => {\n            setName(response.data.name)\n        })\n    }, [])\n \n    return (\n        \u003Cdiv>\n            My name is {Name}\n        \u003C\u002Fdiv>\n    )\n}\n",{"_key":284,"_type":59,"children":285,"markDefs":332,"style":90},"3c25521ec919",[286,290,293,296,299,303,306,310,314,317,321,325,328],{"_key":287,"_type":63,"marks":288,"text":289},"3c25521ec9190",[],"The code above collects user data by using the Axios API and prints it on the DOM. The ",{"_key":291,"_type":63,"marks":292,"text":274},"3c25521ec9191",[126],{"_key":294,"_type":63,"marks":295,"text":270},"3c25521ec9192",[],{"_key":297,"_type":63,"marks":298,"text":266},"3c25521ec9193",[126],{"_key":300,"_type":63,"marks":301,"text":302},"3c25521ec9194",[]," hooks make for more straightforward and concise code that is easy to understand and work on than the class components. When using lifecycle in class components, the ",{"_key":304,"_type":63,"marks":305,"text":247},"3c25521ec9195",[126],{"_key":307,"_type":63,"marks":308,"text":309},"3c25521ec9196",[],", ",{"_key":311,"_type":63,"marks":312,"text":313},"3c25521ec9197",[126],"componentDidUpdate()",{"_key":315,"_type":63,"marks":316,"text":309},"3c25521ec9198",[],{"_key":318,"_type":63,"marks":319,"text":320},"3c25521ec9199",[126],"componentWillUnmount()",{"_key":322,"_type":63,"marks":323,"text":324},"3c25521ec91910",[]," methods are handled individually, but when using React hooks, you can just do everything through the ",{"_key":326,"_type":63,"marks":327,"text":274},"3c25521ec91911",[126],{"_key":329,"_type":63,"marks":330,"text":331},"3c25521ec91912",[]," hook.",[],{"_key":334,"_type":59,"children":335,"markDefs":340,"style":107},"08196a6c617d",[336],{"_key":337,"_type":63,"marks":338,"text":339},"08196a6c617d0",[],"Hooks have made React easier to learn for beginners",[],{"_key":342,"_type":59,"children":343,"markDefs":348,"style":90},"da09ebd2d33d",[344],{"_key":345,"_type":63,"marks":346,"text":347},"da09ebd2d33d0",[],"Class components have always been a little cumbersome and confusing, especially as it makes state management and code reuse look so much more complicated than it actually is. That made many beginner developers shy away from React and opt for an “easier” framework. With hooks, it’s now simpler to learn React; because of this, its use in the tech world today has grown:",[],{"_key":350,"_type":223,"alt":351,"asset":352,"caption":354,"markDefs":12},"d90163bfac5a","A chart showing the relative volumes of questions for JavaScript Frameworks: jquery, ReactJS, AngularJS, and Angular. ",{"_ref":353,"_type":227},"image-e4a500781fce7086ecd033041ce5987252fce41a-591x395-png","via https:\u002F\u002Finsights.stackoverflow.com\u002Ftrends?tags=jquery%2Cangularjs%2Cangular%2Creactjs ",{"_key":356,"_type":59,"children":357,"markDefs":362,"style":90},"974880713c78",[358],{"_key":359,"_type":63,"marks":360,"text":361},"974880713c780",[],"The graph above shows the increase in the percentage of Stack Overflow questions about React over the years vs. other popular JavaScript frameworks, proving that its general usage has increased since the introduction of hooks.",[],{"_key":364,"_type":59,"children":365,"markDefs":370,"style":107},"f666825c4228",[366],{"_key":367,"_type":63,"marks":368,"text":369},"f666825c42280",[],"Some hooks and their functions",[],{"_key":372,"_type":59,"children":373,"markDefs":385,"style":90},"0a0faafd55a7",[374,378,381],{"_key":375,"_type":63,"marks":376,"text":377},"0a0faafd55a70",[],"Before hooks were introduced, organizing components by lifecycle methods forced us to sprinkle similar logic in several components i.e. writing the same code in several places. To solve this and other superficial problems, React embraced functions for more straightforward and more flexible code. The next issue they had to solve was how to change the state of our components. This now brings us to our first hook: ",{"_key":379,"_type":63,"marks":380,"text":266},"0a0faafd55a71",[126],{"_key":382,"_type":63,"marks":383,"text":384},"0a0faafd55a72",[],".",[],{"_key":387,"_type":59,"children":388,"markDefs":400,"style":401},"8478a7e8639d",[389,393,396],{"_key":390,"_type":63,"marks":391,"text":392},"8478a7e8639d0",[],"The ",{"_key":394,"_type":63,"marks":395,"text":266},"8478a7e8639d1",[126],{"_key":397,"_type":63,"marks":398,"text":399},"8478a7e8639d2",[]," Hook",[],"h3",{"_key":403,"_type":59,"children":404,"markDefs":416,"style":90},"373f77bccb21",[405,409,412],{"_key":406,"_type":63,"marks":407,"text":408},"373f77bccb210",[],"Arguably the most common React hook, ",{"_key":410,"_type":63,"marks":411,"text":266},"373f77bccb211",[126],{"_key":413,"_type":63,"marks":414,"text":415},"373f77bccb212",[]," helps you pass in state variables in a functional component. Take a look at the code below:",[],{"_key":418,"_type":126,"code":419,"markDefs":12},"05d76cc564a4","const loadingTuple = React.useState(true)\nconst loading = loadingTuple[0]\nconst setLoading = loadingTuple[1]\n \n \n \nloading \u002F\u002F true\nsetLoading(false)\nloading \u002F\u002F false\n\n",{"_key":421,"_type":59,"children":422,"markDefs":449,"style":90},"9b403eaf940d",[423,427,430,434,438,442,445],{"_key":424,"_type":63,"marks":425,"text":426},"9b403eaf940d0",[],"In the code above, ",{"_key":428,"_type":63,"marks":429,"text":266},"9b403eaf940d1",[126],{"_key":431,"_type":63,"marks":432,"text":433},"9b403eaf940d2",[]," takes a single argument: the state’s initial value. It returns an array with a ",{"_key":435,"_type":63,"marks":436,"text":437},"9b403eaf940d3",[126],"state",{"_key":439,"_type":63,"marks":440,"text":441},"9b403eaf940d4",[]," variable and a function to update that state. You now have everything you need to update the ",{"_key":443,"_type":63,"marks":444,"text":437},"9b403eaf940d5",[126],{"_key":446,"_type":63,"marks":447,"text":448},"9b403eaf940d6",[]," of your functional component.",[],{"_key":451,"_type":59,"children":452,"markDefs":463,"style":90},"9ca0f13a114f",[453,457,460],{"_key":454,"_type":63,"marks":455,"text":456},"9ca0f13a114f0",[],"The next hook we will look into solves the problem of implementing lifecycles in a functional component. It’s called ",{"_key":458,"_type":63,"marks":459,"text":274},"9ca0f13a114f1",[126],{"_key":461,"_type":63,"marks":462,"text":384},"9ca0f13a114f2",[],[],{"_key":465,"_type":59,"children":466,"markDefs":476,"style":401},"f679d9939a8b",[467,470,473],{"_key":468,"_type":63,"marks":469,"text":392},"f679d9939a8b0",[],{"_key":471,"_type":63,"marks":472,"text":274},"f679d9939a8b1",[126],{"_key":474,"_type":63,"marks":475,"text":399},"f679d9939a8b2",[],[],{"_key":478,"_type":59,"children":479,"markDefs":490,"style":90},"d2aaafa2d761",[480,483,486],{"_key":481,"_type":63,"marks":482,"text":392},"d2aaafa2d7610",[],{"_key":484,"_type":63,"marks":485,"text":274},"d2aaafa2d7611",[126],{"_key":487,"_type":63,"marks":488,"text":489},"d2aaafa2d7612",[]," helps to perform side effects in functional components; that is, any function that you need to run after updating the DOM. It replaces some events by running a function whenever one or more variables change. It takes two arguments: a function and an optional array. The function defines which “side effect” to run, and the optional array indicates variables, objects, etc., to watch for changes.",[],{"_key":492,"_type":59,"children":493,"markDefs":498,"style":401},"79d26a0381b4",[494],{"_key":495,"_type":63,"marks":496,"text":497},"79d26a0381b40",[],"Other React hooks include:",[],{"_key":500,"_type":59,"children":501,"level":194,"listItem":195,"markDefs":510,"style":90},"709fc3c9b2fa",[502,506],{"_key":503,"_type":63,"marks":504,"text":505},"709fc3c9b2fa0",[126],"useContext()",{"_key":507,"_type":63,"marks":508,"text":509},"709fc3c9b2fa1",[],": This hook helps to build a context API, which itself is a mechanism used to share data without passing props.",[],{"_key":512,"_type":59,"children":513,"level":194,"listItem":195,"markDefs":522,"style":90},"1da5835e8332",[514,518],{"_key":515,"_type":63,"marks":516,"text":517},"1da5835e83320",[126],"useRef()",{"_key":519,"_type":63,"marks":520,"text":521},"1da5835e83321",[],": This hook allows you to reference the DOM in the functional component directly.\n",[],{"_key":524,"_type":59,"children":525,"markDefs":545,"style":90},"3f74c2835dec",[526,530,533,537,541],{"_key":527,"_type":63,"marks":528,"text":529},"3f74c2835dec0",[],"Note: ",{"_key":531,"_type":63,"marks":532,"text":517},"3f74c2835dec1",[126],{"_key":534,"_type":63,"marks":535,"text":536},"3f74c2835dec2",[]," doesn’t trigger a re-render like ",{"_key":538,"_type":63,"marks":539,"text":540},"3f74c2835dec3",[126],"setState()",{"_key":542,"_type":63,"marks":543,"text":544},"3f74c2835dec4",[]," does.",[],{"_key":547,"_type":59,"children":548,"level":194,"listItem":195,"markDefs":557,"style":90},"6ce096f46548",[549,553],{"_key":550,"_type":63,"marks":551,"text":552},"6ce096f465480",[126],"useReducer()",{"_key":554,"_type":63,"marks":555,"text":556},"6ce096f465481",[],": This stores the current state value. You can liken it to Redux.",[],{"_key":559,"_type":59,"children":560,"level":194,"listItem":195,"markDefs":569,"style":90},"ce113e88d91b",[561,565],{"_key":562,"_type":63,"marks":563,"text":564},"ce113e88d91b0",[126],"useMemo()",{"_key":566,"_type":63,"marks":567,"text":568},"ce113e88d91b1",[],": This is a hook used to return a memoized value, i.e. when you need your function to return a cached value.",[],{"_key":571,"_type":59,"children":572,"level":194,"listItem":195,"markDefs":581,"style":90},"05c1d323fe03",[573,577],{"_key":574,"_type":63,"marks":575,"text":576},"05c1d323fe030",[126],"useCallback",{"_key":578,"_type":63,"marks":579,"text":580},"05c1d323fe031",[],": This hook is used when you have a component’s child continuously re-rendering. It will then return a memoized version of the callback that only changes when one of the dependencies changes.",[],{"_key":583,"_type":59,"children":584,"markDefs":597,"style":90},"3c4caefee0d3",[585,589,594],{"_key":586,"_type":63,"marks":587,"text":588},"3c4caefee0d30",[],"These are just some of the most commonly used React hooks. If you want to learn more about React hooks, you can check it out ",{"_key":590,"_type":63,"marks":591,"text":593},"3c4caefee0d31",[592],"6dba12450a89","here",{"_key":595,"_type":63,"marks":596,"text":384},"3c4caefee0d32",[],[598],{"_key":592,"_type":86,"href":599,"reference":12},"https:\u002F\u002Freactjs.org\u002Fdocs\u002Fhooks-overview.html",{"_key":601,"_type":59,"children":602,"markDefs":608,"style":107},"9cc1362cd831",[603],{"_key":604,"_type":63,"marks":605,"text":607},"9cc1362cd8310",[606],"strong","Conclusion",[],{"_key":610,"_type":59,"children":611,"markDefs":616,"style":90},"16658e28b39d",[612],{"_key":613,"_type":63,"marks":614,"text":615},"16658e28b39d0",[],"We used classes for React components because it was the best way at the time as we couldn’t create a state or implement the lifecycle methods in functional components. React hooks have made performing these functionalities much easier by providing an avenue for simpler, more composable, flexible, and extendable code than using class components without hooks. Many companies have adopted React as their primary front-end framework, which makes more developers add it to their skill-set. If you have any questions, leave a comment below!",[],true,"2021\u002F10\u002F20","Originally, React mainly used class components, which can be strenuous at times as you always had to switch between classes, higher-order components, and render props. With React hooks, you can now do all these without switching, using functional components.",{"_type":223,"asset":621},{"_ref":622,"_type":227},"image-c285fa20b1e4a139bbe2f1e9762181dbd10bb874-2400x1260-jpg",{"code":624,"language":625},"\u003C!-- wp:paragraph -->\n\u003Cp>React is \u003Ca href=\"https:\u002F\u002Finsights.stackoverflow.com\u002Fsurvey\u002F2021#section-most-popular-technologies-web-frameworks\">the most popular front-end framework\u003C\u002Fa> in the \u003Ca href=\"https:\u002F\u002Fstackoverflow.blog\u002F2018\u002F01\u002F11\u002Fbrutal-lifecycle-javascript-frameworks\u002F\">JavaScript ecosystem\u003C\u002Fa>. It is famous for its ease of use and its readability, allowing companies and startups to adopt it. But classes can be unwieldy and hard to understand. Hooks allow you to use state, lifecycle methods, and other functionalities of React without using classes. \u003C\u002Fp>\n\u003C!-- \u002Fwp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>This article will explain what hooks are, what makes them unique, and why they are the best thing to happen to React. \u003C\u002Fp>\n\u003C!-- \u002Fwp:paragraph -->\n\n\u003C!-- wp:heading -->\n\u003Ch2 id=\"h-the-origin-of-react-hooks\">The origin of React hooks\u003C\u002Fh2>\n\u003C!-- \u002Fwp:heading -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Originally, React mainly used class components, which can be strenuous at times as you always had to switch between classes, higher-order components, and render props. With React hooks, you can now do all these without switching, using functional components. Hooks make React so much better because you have simpler code that implements similar functionalities faster and more effectively. You can also implement React state and lifecycle methods without writing classes.\u003C\u002Fp>\n\u003C!-- \u002Fwp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Below are code examples to illustrate React class and functional components.\u003C\u002Fp>\n\u003C!-- \u002Fwp:paragraph -->\n\n\u003C!-- wp:code -->\n\u003Cpre class=\"wp-block-code\">\u003Ccode>import React, { Component } from 'react'\n \nexport default class Hello extends Component {\n    render() {\n        return(\n            <div>\n            Hello World!\n            <\u002Fdiv>\n        )\n    }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C!-- \u002Fwp:code -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>The code above is a class component that prints “Hello World” in the DOM.\u003C\u002Fp>\n\u003C!-- \u002Fwp:paragraph -->\n\n\u003C!-- wp:code -->\n\u003Cpre class=\"wp-block-code\">\u003Ccode>import React from 'react'\n \nexport default function Hello() {\n    return (\n        <div>\n            Hello World!\n        <\u002Fdiv>\n    )\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C!-- \u002Fwp:code -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>The code above is a functional component that prints “Hello World” on the DOM.\u003C\u002Fp>\n\u003C!-- \u002Fwp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Comparing both sets of code above, the functional component has significantly simpler code that performs the same function; there’s no need to allocate space to a class instance, then call a \u003Ccode>render()\u003C\u002Fcode> function, you just call the function. React hooks have so many benefits and functions they perform, but one of the big ones is to make the React lifecycle methods easier.\u003C\u002Fp>\n\u003C!-- \u002Fwp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>NOTE: You cannot use React hooks on class components.\u003C\u002Fp>\n\u003C!-- \u002Fwp:paragraph -->\n\n\u003C!-- wp:heading -->\n\u003Ch2 id=\"h-how-have-hooks-made-the-react-lifecycle-easier\">How have hooks made the React lifecycle easier?\u003C\u002Fh2>\n\u003C!-- \u002Fwp:heading -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>The various lifecycle methods in React include mounting, updating, and unmounting.\u003C\u002Fp>\n\u003C!-- \u002Fwp:paragraph -->\n\n\u003C!-- wp:list -->\n\u003Cul>\u003Cli>Mounting inserts elements into the DOM. \u003C\u002Fli>\u003Cli>Updating as the name implies, updates elements in the DOM.\u003C\u002Fli>\u003Cli>Unmounting removes elements from the DOM.\u003C\u002Fli>\u003C\u002Ful>\n\u003C!-- \u002Fwp:list -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Below is an illustration of the various React lifecycle methods:\u003C\u002Fp>\n\u003C!-- \u002Fwp:paragraph -->\n\n\u003C!-- wp:image -->\n\u003Cfigure class=\"wp-block-image\">\u003Cimg src=\"https:\u002F\u002Flh4.googleusercontent.com\u002FJoTzwb0XqJdldu-C6uvm-eYaurTFrQ7YsMQz-ZXhLVwLh_OPseD8CkBfxEIXL3Ij5B525ZXj7t9uKQPvRb8FO9Ha0nzw8_Uc-_EaU7XlSRQCnEWL2IeQBg4EOlSRIATB9TZpwjsH=s1600\" alt=\"A graph that shows how mounting, updating, and unmounting work in the render, pre-commit, and commit phases. \"\u002F>\u003Cfigcaption>Image from Understanding the \u003Ca href=\"https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F29873730\u002Freact-lifecycle-methods-understanding\">React Lifecycle Methods\u003C\u002Fa>\u003C\u002Ffigcaption>\u003C\u002Ffigure>\n\u003C!-- \u002Fwp:image -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Initially, you could only use these lifecycle methods with class components, which usually comprise a lot of carefully engineered code that is more difficult to write or understand than when you use hooks to implement them as functional components.\u003C\u002Fp>\n\u003C!-- \u002Fwp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Take, for instance, if you try to fetch user data using a \u003Ccode>componentDidMount()\u003C\u002Fcode> in a class component like in the code below:\u003C\u002Fp>\n\u003C!-- \u002Fwp:paragraph -->\n\n\u003C!-- wp:code -->\n\u003Cpre class=\"wp-block-code\">\u003Ccode>import React, { Component } from 'react'\nimport Axios from 'axios'\n \nexport default class Hello extends Component {\n \n    constructor(props) {\n        super(props);\n        this.state = { name: \"\"};\n    }\n \n    componentDidMount() {\n        Axios.get('\u002Fapi\u002Fuser\u002Fname')\n        .then(response => {\n            this.setState({ name: response.data.name })\n        })\n    }\n \n    render() {\n        return (\n            <div>\n                My name is {this.state.name}\n            <\u002Fdiv>\n        )\n    }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C!-- \u002Fwp:code -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Now let’s compare it to doing the same thing with a functional component by using the \u003Ccode>useState\u003C\u002Fcode> and \u003Ccode>useEffect\u003C\u002Fcode> hooks in the code below:\u003C\u002Fp>\n\u003C!-- \u002Fwp:paragraph -->\n\n\u003C!-- wp:code -->\n\u003Cpre class=\"wp-block-code\">\u003Ccode>import React, { useEffect, useState } from 'react'\nimport Axios from 'axios'\n \nexport default function Hello() {\n \n    const [Name, setName] = useState(\"\")\n \n    useEffect(() => {\n        Axios.get('\u002Fapi\u002Fuser\u002Fname')\n        .then(response => {\n            setName(response.data.name)\n        })\n    }, [])\n \n    return (\n        <div>\n            My name is {Name}\n        <\u002Fdiv>\n    )\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C!-- \u002Fwp:code -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>The code above collects user data by using the Axios API and prints it on the DOM. The \u003Ccode>useEffect\u003C\u002Fcode> and \u003Ccode>useState\u003C\u002Fcode> hooks make for more straightforward and concise code that is easy to understand and work on than the class components. When using lifecycle in class components, the \u003Ccode>componentDidMount()\u003C\u002Fcode>, \u003Ccode>componentDidUpdate()\u003C\u002Fcode>, \u003Ccode>componentWillUnmount()\u003C\u002Fcode> methods are handled individually, but when using React hooks, you can just do everything through the \u003Ccode>useEffect\u003C\u002Fcode> hook. \u003C\u002Fp>\n\u003C!-- \u002Fwp:paragraph -->\n\n\u003C!-- wp:heading -->\n\u003Ch2 id=\"h-hooks-have-made-react-easier-to-learn-for-beginners\">Hooks have made React easier to learn for beginners \u003C\u002Fh2>\n\u003C!-- \u002Fwp:heading -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Class components have always been a little cumbersome and confusing, especially as it makes state management and code reuse look so much more complicated than it actually is. That made many beginner developers shy away from React and opt for an “easier” framework. With hooks, it’s now simpler to learn React; because of this, its use in the tech world today has grown: \u003C\u002Fp>\n\u003C!-- \u002Fwp:paragraph -->\n\n\u003C!-- wp:image -->\n\u003Cfigure class=\"wp-block-image\">\u003Cimg src=\"https:\u002F\u002Flh4.googleusercontent.com\u002FktziH1T91IngHVTSaF8bI6S3TKJpHZgdi6iWo4oFdo-R0spD-d7gwnRBIzy66mDMsNlceuARgajRQkqSE6qL-9lclTWUVF1QNoPfbIeVBHlVyTkO3oAd4rdcSDu3o9cJ5m65HhQa=s1600\" alt=\"A chart showing the relative volumes of questions for JavaScript Frameworks: jquery, ReactJS, AngularJS, and Angular. \"\u002F>\u003Cfigcaption>via https:\u002F\u002Finsights.stackoverflow.com\u002Ftrends?tags=jquery%2Cangularjs%2Cangular%2Creactjs\u003Ca href=\"https:\u002F\u002Fwww.tecla.io\u002Fblog\u002F2019-stats-on-top-js-frameworks-react-angular-and-vue\u002F\"> \u003C\u002Fa>\u003C\u002Ffigcaption>\u003C\u002Ffigure>\n\u003C!-- \u002Fwp:image -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>The graph above shows the increase in the percentage of Stack Overflow questions about React over the years vs. other popular JavaScript frameworks, proving that its general usage has increased since the introduction of hooks. \u003C\u002Fp>\n\u003C!-- \u002Fwp:paragraph -->\n\n\u003C!-- wp:heading -->\n\u003Ch2 id=\"h-some-hooks-and-their-functions\">Some hooks and their functions \u003C\u002Fh2>\n\u003C!-- \u002Fwp:heading -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Before hooks were introduced, organizing components by lifecycle methods forced us to sprinkle similar logic in several components i.e. writing the same code in several places.  To solve this and other superficial problems, React embraced functions for more straightforward and more flexible code. The next issue they had to solve was how to change the state of our components. This now brings us to our first hook: \u003Ccode>useState\u003C\u002Fcode>.\u003C\u002Fp>\n\u003C!-- \u002Fwp:paragraph -->\n\n\u003C!-- wp:heading {\"level\":3} -->\n\u003Ch3 id=\"h-the-usestate-hook\">The \u003Ccode>useState\u003C\u002Fcode> Hook \u003C\u002Fh3>\n\u003C!-- \u002Fwp:heading -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Arguably the most common React hook, \u003Ccode>useState\u003C\u002Fcode> helps you pass in state variables in a functional component. Take a look at the code below:\u003C\u002Fp>\n\u003C!-- \u002Fwp:paragraph -->\n\n\u003C!-- wp:code -->\n\u003Cpre class=\"wp-block-code\">\u003Ccode>const loadingTuple = React.useState(true)\nconst loading = loadingTuple[0]\nconst setLoading = loadingTuple[1]\n \n \n \nloading \u002F\u002F true\nsetLoading(false)\nloading \u002F\u002F false\n\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C!-- \u002Fwp:code -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>In the code above, \u003Ccode>useState\u003C\u002Fcode> takes a single argument: the state’s initial value. It returns an array with a \u003Ccode>state\u003C\u002Fcode> variable and a function to update that state. You now have everything you need to update the  \u003Ccode>state\u003C\u002Fcode> of your functional component. \u003C\u002Fp>\n\u003C!-- \u002Fwp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>The next hook we will look into solves the problem of implementing lifecycles in a functional component. It’s called \u003Ccode>useEffect\u003C\u002Fcode>.\u003C\u002Fp>\n\u003C!-- \u002Fwp:paragraph -->\n\n\u003C!-- wp:heading {\"level\":3} -->\n\u003Ch3 id=\"h-the-useeffect-hook\">The \u003Ccode>useEffect\u003C\u002Fcode> Hook \u003C\u002Fh3>\n\u003C!-- \u002Fwp:heading -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>The \u003Ccode>useEffect\u003C\u002Fcode> helps to perform side effects in functional components; that is, any function that you need to run after updating the DOM. It replaces some events by running a function whenever one or more variables change. It takes two arguments: a function and an optional array. The function defines which “side effect” to run, and the optional array indicates variables, objects, etc., to watch for changes.\u003C\u002Fp>\n\u003C!-- \u002Fwp:paragraph -->\n\n\u003C!-- wp:heading {\"level\":3} -->\n\u003Ch3 id=\"h-other-react-hooks-include\">Other React hooks include:      \u003C\u002Fh3>\n\u003C!-- \u002Fwp:heading -->\n\n\u003C!-- wp:list -->\n\u003Cul>\u003Cli>\u003Ccode>useContext()\u003C\u002Fcode>: This hook helps to build a context API, which itself is a mechanism used to share data without passing props. \u003C\u002Fli>\u003C\u002Ful>\n\u003C!-- \u002Fwp:list -->\n\n\u003C!-- wp:list -->\n\u003Cul>\u003Cli>\u003Ccode>useRef()\u003C\u002Fcode>: This hook allows you to reference the DOM in the functional component directly.\u003Cbr>\u003C\u002Fli>\u003C\u002Ful>\n\u003C!-- \u002Fwp:list -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Note: \u003Ccode>useRef()\u003C\u002Fcode> doesn’t trigger a re-render like \u003Ccode>setState()\u003C\u002Fcode> does.\u003C\u002Fp>\n\u003C!-- \u002Fwp:paragraph -->\n\n\u003C!-- wp:list -->\n\u003Cul>\u003Cli>\u003Ccode>useReducer()\u003C\u002Fcode>: This stores the current state value. You can liken it to Redux.\u003C\u002Fli>\u003C\u002Ful>\n\u003C!-- \u002Fwp:list -->\n\n\u003C!-- wp:list -->\n\u003Cul>\u003Cli>\u003Ccode>useMemo()\u003C\u002Fcode>: This is a hook used to return a memoized value, i.e. when you need your function to return a cached value. \u003C\u002Fli>\u003C\u002Ful>\n\u003C!-- \u002Fwp:list -->\n\n\u003C!-- wp:list -->\n\u003Cul>\u003Cli>\u003Ccode>useCallback\u003C\u002Fcode>: This hook is used when you have a component’s child continuously re-rendering. It will then return a memoized version of the callback that only changes when one of the dependencies changes.\u003C\u002Fli>\u003C\u002Ful>\n\u003C!-- \u002Fwp:list -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>These are just some of the most commonly used React hooks. If you want to learn more about React hooks, you can check it out \u003Ca href=\"https:\u002F\u002Freactjs.org\u002Fdocs\u002Fhooks-overview.html\">here\u003C\u002Fa>.\u003C\u002Fp>\n\u003C!-- \u002Fwp:paragraph -->\n\n\u003C!-- wp:heading -->\n\u003Ch2 id=\"h-conclusion\">\u003Cstrong>Conclusion\u003C\u002Fstrong> \u003C\u002Fh2>\n\u003C!-- \u002Fwp:heading -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp id=\"h-we-used-classes-for-react-components-because-it-was-the-best-way-at-the-time-as-we-couldn-t-create-a-state-or-implement-the-lifecycle-methods-in-functional-components-react-hooks-have-made-performing-these-functionalities-much-easier-by-providing-an-avenue-for-simpler-more-composable-flexible-and-extendable-code-than-using-class-components-without-hooks-many-companies-have-adopted-react-as-their-primary-front-end-framework-which-makes-more-developers-add-it-to-their-skill-set-if-you-have-any-questions-leave-a-comment-below\">We used classes for React components because it was the best way at the time as we couldn’t create a state or implement the lifecycle methods in functional components. React hooks have made performing these functionalities much easier by providing an avenue for simpler, more composable, flexible, and extendable code than using class components without hooks. Many companies have adopted React as their primary front-end framework, which makes more developers add it to their skill-set. If you have any questions, leave a comment below!\u003C\u002Fp>\n\u003C!-- \u002Fwp:paragraph -->","html","2021-10-20T14:10:43.000Z",{"current":628},"why-hooks-are-the-best-thing-to-happen-to-react",[630,638,643,647],{"_createdAt":631,"_id":632,"_rev":633,"_type":634,"_updatedAt":631,"slug":635,"title":637},"2023-05-23T16:43:21Z","wp-tagcat-code-for-a-living","9HpbCsT2tq0xwozQfkc4ih","blogTag",{"current":636},"code-for-a-living","Code for a Living",{"_createdAt":631,"_id":639,"_rev":633,"_type":634,"_updatedAt":631,"slug":640,"title":642},"wp-tagcat-functional-programming",{"current":641},"functional-programming","functional programming",{"_createdAt":631,"_id":644,"_rev":633,"_type":634,"_updatedAt":631,"slug":645,"title":646},"wp-tagcat-react",{"current":646},"react",{"_createdAt":631,"_id":648,"_rev":633,"_type":634,"_updatedAt":631,"slug":649,"title":651},"wp-tagcat-react-hooks",{"current":650},"react-hooks","react hooks","Why hooks are the best thing to happen to React",[654,660,666,672],{"_id":655,"publishedAt":656,"slug":657,"sponsored":12,"title":659},"76c9771b-34e6-4d98-8641-ecefc711f0ef","2026-07-06T15:23:34.559Z",{"_type":10,"current":658},"when-the-sensor-starts-thinking-snortml-agentic-ai-and-the-evolving-architecture-of-intrusion-detection","When the sensor starts thinking: SnortML, agentic AI, and the evolving architecture of intrusion detection",{"_id":661,"publishedAt":662,"slug":663,"sponsored":12,"title":665},"28e560af-f0aa-4d46-bd90-f435ad604aa7","2026-06-26T14:00:27.102Z",{"_type":10,"current":664},"paging-charity-how-can-engineering-leaders-avoid-becoming-bond-villains","Paging Charity! How can engineering leaders avoid becoming Bond villains?",{"_id":667,"publishedAt":668,"slug":669,"sponsored":12,"title":671},"4b22c2a3-3779-4966-93eb-5230391dbdce","2026-06-23T14:08:58.595Z",{"_type":10,"current":670},"your-ai-shipped-a-backend-that-boots-that-is-the-whole-problem","Your AI shipped a backend that boots. That is the whole problem.",{"_id":673,"publishedAt":674,"slug":675,"sponsored":12,"title":677},"5cf362e1-fe7b-45af-b69c-914731c6a052","2026-06-23T14:00:00.000Z",{"_type":10,"current":676},"the-2026-developer-survey-is-now-open-for-human-developers-only","The 2026 Developer Survey is now open (for human developers only)!",{"data":679,"sourceMap":-1},{"count":680,"lastTimestamp":681},31,"2024-07-01T13:41:55Z"]