{"id":3008,"date":"2021-12-07T08:18:30","date_gmt":"2021-12-07T08:18:30","guid":{"rendered":"http:\/\/the-codest.localhost\/blog\/a-deeper-look-at-the-most-popular-react-hooks\/"},"modified":"2026-04-28T14:05:27","modified_gmt":"2026-04-28T14:05:27","slug":"syvempi-katsaus-suosituimpiin-react-koukkuihin","status":"publish","type":"post","link":"https:\/\/thecodest.co\/fi\/blog\/a-deeper-look-at-the-most-popular-react-hooks\/","title":{"rendered":"Syvempi katsaus suosituimpiin React-koukkuihin"},"content":{"rendered":"\n<p>The most important things you need to remember about Hooks:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>they can be used only in function components &#8211; class components have own lifecycle implementation;<\/li>\n\n\n\n<li>they always start with <code>use<\/code>;<\/li>\n\n\n\n<li>you can use as may Hooks as you want, but you need to remember that using them has an impact on the overall performance;<\/li>\n\n\n\n<li>they must be executed in the same order on each render&#8230;but why? Let\u2019s take a look at an example:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">import { useState,useEffect } from \"<a href=\"https:\/\/thecodest.co\/fi\/blog\/conditional-component-visibility-in-react\/\">react<\/a>\";\n\nexport default function FunctionComponent() {\nconst [value, setValue] = useState(1);\nconst [doubleValue, setDoubleValue] = useState(1);\nif (value > 3) {\n  useEffect(() => setDoubleValue(value * 2),[value]);\n}\n\nreturn (\n  &lt;>\n    &lt;p>{`Single ${value} Double ${doubleValue}`}&lt;\/p>\n    &lt;button onClick={() => setValue(value + 1)}>Check&lt;\/button>\n  &lt;\/>\n);\n}\n```<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>At first, you will receive a warning from eslint:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"json\" class=\"language-json\"><code>srcFunctionComponent.js\n   Line 11:5:  React Hook \"useEffect\" is called conditionally. &lt;strong>React Hooks&lt;\/strong> must be called in the exact same order in every component render  .eslintreact-hooks\/rules-of-hooks<\/code><\/code><\/pre>\n\n\n\n<p>As you can see, it\u2019s only an eslint warning so you can disable it by adding a command from below at the top of the <code>FunctionComponent<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code>\/* eslint-disable react-hooks\/rules-of-hooks *\/<\/code><code> <\/code><\/code><\/pre>\n\n\n\n<p>and it will work but only till we fulfill the condition that runs our Hook. The very next thing which we will see is this error.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/conditional.gif\" alt=\"\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">Uncaught Error: Rendered more hooks than during the previous render.\n     React 5\n     FunctionComponent FunctionComponent.js:11\n     React 12\n     unstable_runWithPriority scheduler.development.js:468\n     React 17\n     <a href=\"https:\/\/thecodest.co\/fi\/blog\/hire-vue-js-developers\/\">js<\/a> index.js:7\n     js main.chunk.js:905\n     Webpack 7\n react-dom.development.js:15162<\/code><\/pre>\n\n\n\n<p>Why this happens? React relies on the order in which the Hooks are called as React wouldn\u2019t know what to return for the useEffect because there was no such Hook in the line to check.<\/p>\n\n\n\n<p>Remember, eslint is a powerful tool, it helps <a href=\"https:\/\/thecodest.co\/fi\/blog\/why-us-companies-are-opting-for-polish-developers\/\">us<\/a> catch a lot of potential bugs and errors. Disabling its warnings is a dangerous thing, always check if ignoring the warning can cause an app crash.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">useState<\/h2>\n\n\n\n<p>You probably know how it looks \ud83d\ude09<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code>const [value, setValue] = useState(0);<\/code><\/code><\/pre>\n\n\n\n<p>So, you have 4 elements: state (reactive value), update function (setter), actual hook (function) and optional initial value. Why it returns an array? Because we can restructure it as we like.<\/p>\n\n\n\n<p>Now I want to focus on the last element &#8211; the initial value. There are two ways to pass the initial state:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>By hardcoded value or smth &#8211; which will be called on each render<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code>const [value, setValue] = useState(0);<\/code><\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\">\n<li>By a function version. It`s really helpful if we want to run the initial state only once, on the very first render. Maybe you need to make a lot of complex calculations to receive the initial state? It will nicely decrease the resource cost, yay!<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">const [value, setValue] = useState(() => {\n   console.log(\"INIT\");\n   return 0;\n });<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>How to check that the first way is really called on each render? Create a function and pass it as an initial state:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">const checkInit = () => {\nconsole.log(\"INIT\");\nreturn 0;\n};\n\nconst [value, setValue] = useState(checkInit());\n```<\/code><\/pre>\n\n\n\n<p>And now pass it using the second way:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">const checkInit = () => {\nconsole.log(\"INIT\");\nreturn 0;\n};\n\nconst [value, setValue] = useState(() => checkInit());\n```<\/code><\/pre>\n\n\n\n<p>Cool, right?<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/noice.gif\" alt=\"noice.png\"\/><\/figure>\n\n\n\n<p>Another thing which can create bugs in the app flow: you probably know how to update a state, right?<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code>setValue(1);<\/code><\/code><\/pre>\n\n\n\n<p>Right&#8230; but what if I want to update the state based on a previous state?<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code>setValue(value + 1);<\/code><\/code><\/pre>\n\n\n\n<p>Yes&#8230; But no&#8230; What if you&#8217;ll try to call the setter function twice, one after another? The recommended way to update a state based on the previous state is to use a function. It guarantees that you are referring to the previous state<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">setValue((prevState) => prevState + 1);\n\/\/ with objects:\nsetUser((prevState) => ({ ...prevState, lastName: \"Brzeczyszczykiewicz\" }));<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">useEffect<\/h2>\n\n\n\n<p>This Hook take 2 arguments (the second one is optional) and we use it to handle side effects. And depending on what we pass as a second argument, the Hook will be called differently:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>without second argument &#8211; each render<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code>useEffect(() => {\n   doSomething();\n });<\/code><\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\">\n<li>empty array &#8211; only on first render<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">useEffect(() => {\n   doSomething();\n }, []);<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\">\n<li>array with dependencies &#8211; every time the value in the dependency array changes<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code>useEffect(() => {\n   doSomething(value);\n }, [value]);<\/code><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Cleanup<\/h3>\n\n\n\n<p>With useEffect, we can use something what is called cleanup. What is it for? It is very useful, but I think it\u2019s best for cleaning event listeners. Let\u2019s say you want to create an event listener which depends on some state. You don`t want to add a new event listener on each state change, because after a few renders there will be so many listeners that it will affect the app\u2019s performance. A great way to avoid such things is to use the cleanup feature. How to do it? Just add a return function to the useEffect.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">useEffect(() => {\nconsole.log(\"side effect 1\", count);\nreturn () => {\nconsole.log(\"DESTROYED 1\");\n};\n});\n\nuseEffect(() => {\nconsole.log(\"side effect 2\", count);\nreturn () => {\nconsole.log(\"DESTROYED 2\");\n};\n}, []);\n\nuseEffect(() => {\nconsole.log(\"side effect 3\", count);\nreturn () => {\nconsole.log(\"DESTROYED 3\");\n};\n}, [count]);\n```<\/code><\/pre>\n\n\n\n<p>Because it`s inside the useEffect Hook, the return is called depending on the dependency array &#8211; on each render, only on the first render, or when the value in the dependency array changes. But when the component is unmounted, cleaning will be called on the second argument no matter what. The return <a href=\"https:\/\/thecodest.co\/fi\/dictionary\/what-is-code-refactoring\/\">code<\/a> is called before the actual code from Hook. It&#8217;s very logical &#8211; at first clean the old one, then create a new one. Right?<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code>useEffect(() => {\n   \/\/ addEventListener\n   console.log(\"Add\");\n   return () => {\n     \/\/ removeEventListener\n     console.log(\"Remove\");\n   };\n }, [value]);<\/code><\/code><\/pre>\n\n\n\n<p>So, first, you will receive a <code>remove<\/code> message, then <code>Add<\/code>.<\/p>\n\n\n\n<p>There is one thing to be look out for when using useEffect and asynchronous code inside it. Take a look at the code below:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code>useEffect(() => {\n   fetch(\"https:\/\/picsum.photos\/5000\/5000\").then(() => {\n     setValue((prevState) => prevState + 1);\n   });\n }, []);<\/code><\/code><\/pre>\n\n\n\n<p>At first, it looks ok. You are fetching some <a href=\"https:\/\/thecodest.co\/fi\/blog\/app-data-collection-security-risks-value-and-types-explored\/\">data<\/a>, and when the data comes, update the state. And here\u2019s the trap:<\/p>\n\n\n\n<p>Sometimes you will receive such a warning:<br><code>Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.<\/code><\/p>\n\n\n\n<p>The reason is that the component can be unmounted in meantime, but the app will still try to update the state of that component after the promise was fulfilled. How to deal with it? You need to check whether the component exists.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">useEffect(() => {\nlet mounted = true;\nfetch(\"https:\/\/picsum.photos\/5000\/5000\").then(() => {\nif (mounted) {\nsetValue((prevState) => prevState + 1);\n}\n});\n\nreturn () => {\nmounted = false;\n};\n}, []);\n```<\/code><\/pre>\n\n\n\n<p>Note: There is a very similar Hook =&gt; useLayoutEffect() \u2013 the callback runs after rendering the component but before the dom is visually updated. It\u2019s useful when working with getBoundingClientRect(), but you should use useEffect by default. Why? Because it can block visual updates &#8211; when you have a complex code inside your effect Hook.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">useContext<\/h2>\n\n\n\n<p>What is it for? Sharing data without passing props. Consists of the following elements:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Created context &#8211; data<\/li>\n\n\n\n<li>Context Provider &#8211; provide context to all children<\/li>\n\n\n\n<li>Passed value &#8211; data you want to share<\/li>\n\n\n\n<li>Hook &#8211; to read shared data<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">const user = {\nname: \"Adam\",\nlastName: \"Kowalski\",\n};\n\nexport const UserContext = createContext(user);\n\n;\n```<\/code><\/pre>\n\n\n\n<p>In child, you need to import the context and call the useContext Hook and pass that context as an argument.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">import { UserContext } from \".\/App\";\n\nconst { name } = useContext(UserContext);\n\nreturn &lt;h1>Hi {name}&lt;>\n```<\/code><\/pre>\n\n\n\n<p>Voil\u00e0. Looks cool. Mostly for passing global data like themes, etc. Not recommended for using in tasks with very dynamic changes.<\/p>\n\n\n\n<p>Of course, we can create a custom context provider and a custom Hook to reduce the boilerplate instead&#8230; but I will deal with custom Hooks in the next article.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">useReducer<\/h2>\n\n\n\n<p>It allows us to manage the state and re-render when the state changes &#8211; like useState. It`s similar to the <a href=\"https:\/\/thecodest.co\/fi\/blog\/going-from-redux-to-mobx\/\">redux<\/a> reducer. This one is better than useState when state logic is more complicated.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code>const [state, dispatch] = useReducer(reducer, initialArg);<\/code><code> <\/code><\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Returns actual state with a dispatch method.<\/li>\n\n\n\n<li>Differently than in redux, the initial value is specified when the Hook is called.<\/li>\n<\/ul>\n\n\n\n<p>There is also a third argument which can be passed to the useReducer &#8211; the init function.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code>const [state, dispatch] = useReducer(reducer, initialArg, init);<\/code><\/code><\/pre>\n\n\n\n<p>What is it for? It can be used when we want to reset the state to its initial value. Below you can find a nice example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">\/\/ Parent\n\n&lt;ChildComponent initialNumber={1} \/><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">\/\/ Child\nfunction init(initialNumber) {\nreturn { number: initialNumber };\n}\n\nfunction reducer(state, action) {\nswitch (action.type) {\ncase \"change\":\nreturn { number: Math.random() };\ncase \"reset\":\nreturn init(action.payload);\ndefault:\nthrow new Error();\n}\n}\n\nexport default function ChildComponent({ getFactorial }) {\nconst [state, dispatch] = useReducer(reducer, initialNumber, init);\n\nreturn (\n&lt;>\n   &lt;h2>Number: {state.number}&lt;\/h2>\n      &lt;button\n        onClick={() => dispatch({ type: \"reset\", payload: initialNumber })}\n      >\n        Reset\n      &lt;\/button>\n      &lt;button onClick={() => dispatch({ type: \"change\" })}>Draw&lt;\/button>\n    &lt;\/>\n  );\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Number: {state.number}<\/h2>\n\n\n\n<p><button><br><\/button><button><br>&lt;\/&gt;<br>);<br>}<br>&#8220;`<\/button><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/reducer_init.gif\" alt=\"ReducerInit.png\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">useCallback<\/h2>\n\n\n\n<p>When to use it? When we want to achieve referential equality (thereby reducing the number of created functions). This Hook returns the function, unlike useMemo which returns the value.<\/p>\n\n\n\n<p>Example: Create a function in the parent component and then pass it via props<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code>\/\/ Parent\n const getSquaredValue = () => count * count;\n ...\n return (\n   &lt;ChildComponent getSquaredValue={getSquaredValue}>\n )<\/code><code><span style=\"background-color: rgb(40, 44, 52);\"><\/span><\/code><\/code><\/pre>\n\n\n\n<p>Then check in child component how many times the effect Hook will be called after adding that function to the dependency array:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code>\/\/ Child\n useEffect(() => {\n   console.log(\"getSquaredValue\", getSquaredValue());\n }, [getSquaredValue]);<\/code><\/code><\/pre>\n\n\n\n<p>It will log to the console on every render! Even if the values inside the <code>getSquaredValue()<\/code> function didn&#8217;t change. But we can avoid this by wrapping that function in useCallback<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code>const getSquaredValue = useCallback(() => count * count, [count])<\/code><\/code><\/pre>\n\n\n\n<p>We also can pass some parameters to this function:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code>const getSquaredValue = useCallback(\n   (multiplier) => count * count * multiplier,\n   [count]\n );<\/code><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">useMemo<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code>const memoizedValue = useMemo(() => {\n   return doSomething(value);\n }, [value]);<\/code><\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>It is not neutral when looking at the costs of resources &#8211; useMemo must be called on every render, is saves the value in memory and compares (memory overhead),<\/li>\n\n\n\n<li>uses Memoization &#8211; the optimization technique, specific form of caching.<\/li>\n<\/ul>\n\n\n\n<p>You should use it in 2 scenarios only:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>If you want to prevent calling a complex code on each render;<\/li>\n\n\n\n<li>If you want to achieve referential equality.<\/li>\n<\/ol>\n\n\n\n<p>Let`s look a little bit closer at the second case. We want to use useEffect with an object as a dependency. Because objects are compared by their reference, useEffect will be called on each render. To avoid such things, we can combine useEffect with useMemo to memoize such objects and then pass that memoized objects to the dependency array. Short example:<\/p>\n\n\n\n<p>First try to do it without useMemo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">const hobbit = { name: \"Bilbo\" };\n\nuseEffect(() => {\nconsole.log(\"Hello \", hobbit.name);\n}, [hobbit]);\n```<\/code><\/pre>\n\n\n\n<p>Also, you will receive a warning:<\/p>\n\n\n\n<p><code>The 'hobbit' object makes the dependencies of the useEffect Hook (line 49) change on every render. Move it inside the useEffect callback. Alternatively, wrap the initialization of 'hobbit' in its own useMemo () Hook.eslintreact-hooks\/exhaustive-deps<\/code><\/p>\n\n\n\n<p>Then try with useMemo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">const hobbit = useMemo(() => {\nreturn { name: \"Bilbo\" };\n}, []);\n\nuseEffect(() => {\nconsole.log(\"Hello \", hobbit.name);\n}, [hobbit]);\n```<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">useRef<\/h2>\n\n\n\n<p>The most important thing: useRef does not trigger re-rendering (like useState) because it`s not connected to the render cycle &#8211; it keeps the same reference between renders.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code>const ref = useRef(0);<\/code><\/code><\/pre>\n\n\n\n<p>To call the saved value, you need to use a current property (ref is an object) &#8211; <code>ref.current<\/code><\/p>\n\n\n\n<p>The second case for which we can use that Hook is to reference elements inside HTML. Each element has a ref attribute. So, we can handle focus, events etc.<\/p>\n\n\n\n<p>The third case is that we can use refs to handle uncontrolled components. You can read more about them in <a href=\"https:\/\/reactjs.org\/docs\/uncontrolled-components.html\">react docs<\/a>,<br>but in short, it looks like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">export default function UncontrolledForm() {\n  const input = useRef();\n\n  const handleSubmit = (e) => {\n    e.preventDefault();\n    console.log(input.current.value);\n  };\n\n  return (\n    &lt;form onSubmit={handleSubmit}>\n      &lt;input type=\"text\" ref={input} \/>\n      &lt;button type=\"submit\">Submit&lt;\/button>\n    &lt;\/form>\n  );\n}<\/code><\/pre>\n\n\n\n<p>As you can see, there is no event handler, it just remembers the typed value. It&#8217;s great for handling basic forms when you just want to read saved values when you need them (like when submitting).<\/p>\n\n\n\n<p>Bonus: It`s great when you need to remember previous state values. You can use for it the useEffect Hook, just pass the state to the ref.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">const [value, setValue] = useState(\"\");\n\nlet prevValue = useRef(\"\");\n\nuseEffect(() => {\n  prevValue.current = value;\n}, [value]);\n\n&lt;input value={value} onChange={(e) => setValue(e.target.value)}>&lt;\/input>;<\/code><\/pre>\n\n\n\n<p>As you can see, Hooks are not that obvious. We can combine them to solve many problems. You will surely benefit greatly from studying this topic.<\/p>\n\n\n\n<p>And there are also custom hooks&#8230;<\/p>\n\n\n\n<p>In conclusion, <strong>React hooks <\/strong> have revolutionized the way <strong>React developers <\/strong> approach building <strong><a href=\"https:\/\/thecodest.co\/fi\/blog\/find-your-ideal-stack-for-web-development\/\">web<\/a> applications <\/strong>. By providing a more intuitive and efficient way to manage state and lifecycle in functional components, hooks have become an integral part of <strong><a href=\"https:\/\/thecodest.co\/fi\/blog\/react-development-all-you-have-to-know\/\">React development<\/a> <\/strong>.<\/p>\n\n\n\n<p>Whether you&#8217;re a seasoned developer or just starting with React, understanding the most popular hooks and their use cases is crucial. With hooks like useState, useEffect, useContext, and more, <strong>React components <\/strong> can be built with cleaner and more reusable code. Moreover, the ability to create <strong>custom hooks <\/strong>allows developers to encapsulate and share logic across multiple components, promoting code reusability and modularity. As React continues to evolve and introduce new features, hooks will undoubtedly play a central role in leveraging the full potential of the framework.<\/p>\n\n\n\n<p>So, whether you&#8217;re working on a small function app or a large-scale web application, embracing <strong>React hooks <\/strong>will enhance your development workflow and unlock a plethora of possibilities for creating robust and feature-rich <strong>React applications <\/strong>.<\/p>\n\n\n\n<p>End of Part 1<\/p>\n\n\n\n<p><b>Read more:<\/b><\/p>\n\n\n\n<p><a href=\"https:\/\/thecodest.co\/blog\/javascript-is-totally-dead-some-dude-on-the-internet\/\">JavaScript Is Totally Dead. Some Dude on the Internet<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/thecodest.co\/blog\/deploy-graphql-mongodb-api-using-netlify-functions\/\">Deploy GraphQL\/MongoDB API Using Netlify Functions<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/thecodest.co\/blog\/how-not-to-kill-a-project-with-bad-coding-practices\/\">How to Kill a Project with Bad Coding Practises<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Monien haastattelujen aikana olen huomannut, ett\u00e4 jopa kokeneilla ohjelmoijilla on ongelmia koukkujen erottamisessa, puhumattakaan niiden kehittyneemmist\u00e4 ominaisuuksista. Yrit\u00e4n siis selitt\u00e4\u00e4 t\u00e4ss\u00e4 artikkelissa, miten koukkuja tulisi k\u00e4ytt\u00e4\u00e4.<\/p>","protected":false},"author":2,"featured_media":3009,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8],"tags":[],"class_list":["post-3008","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-development"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.3 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>A Deeper Look at the Most Popular React Hooks - The Codest<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thecodest.co\/fi\/blogi\/syvempi-katsaus-suosituimpiin-react-koukkuihin\/\" \/>\n<meta property=\"og:locale\" content=\"fi_FI\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Deeper Look at the Most Popular React Hooks\" \/>\n<meta property=\"og:description\" content=\"In the course of many interviews, I noticed that even experienced programmers have a problem with distinguishing Hooks, not to mention their more advanced capabilities. So, I will try to explain in this article how Hooks should be used.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thecodest.co\/fi\/blogi\/syvempi-katsaus-suosituimpiin-react-koukkuihin\/\" \/>\n<meta property=\"og:site_name\" content=\"The Codest\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-07T08:18:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-28T14:05:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/react-hooks.png\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"thecodest\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"thecodest\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minuuttia\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/a-deeper-look-at-the-most-popular-react-hooks\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/a-deeper-look-at-the-most-popular-react-hooks\\\/\"},\"author\":{\"name\":\"thecodest\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\"},\"headline\":\"A Deeper Look at the Most Popular React Hooks\",\"datePublished\":\"2021-12-07T08:18:30+00:00\",\"dateModified\":\"2026-04-28T14:05:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/a-deeper-look-at-the-most-popular-react-hooks\\\/\"},\"wordCount\":1702,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/a-deeper-look-at-the-most-popular-react-hooks\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/react-hooks.png\",\"articleSection\":[\"Software Development\"],\"inLanguage\":\"fi\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/a-deeper-look-at-the-most-popular-react-hooks\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/a-deeper-look-at-the-most-popular-react-hooks\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/a-deeper-look-at-the-most-popular-react-hooks\\\/\",\"name\":\"A Deeper Look at the Most Popular React Hooks - The Codest\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/a-deeper-look-at-the-most-popular-react-hooks\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/a-deeper-look-at-the-most-popular-react-hooks\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/react-hooks.png\",\"datePublished\":\"2021-12-07T08:18:30+00:00\",\"dateModified\":\"2026-04-28T14:05:27+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/a-deeper-look-at-the-most-popular-react-hooks\\\/#breadcrumb\"},\"inLanguage\":\"fi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/a-deeper-look-at-the-most-popular-react-hooks\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fi\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/a-deeper-look-at-the-most-popular-react-hooks\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/react-hooks.png\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/react-hooks.png\",\"width\":960,\"height\":540},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/a-deeper-look-at-the-most-popular-react-hooks\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thecodest.co\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A Deeper Look at the Most Popular React Hooks\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"name\":\"The Codest\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thecodest.co\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fi\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\",\"name\":\"The Codest\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fi\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"width\":144,\"height\":36,\"caption\":\"The Codest\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/pl.linkedin.com\\\/company\\\/codest\",\"https:\\\/\\\/clutch.co\\\/profile\\\/codest\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\",\"name\":\"thecodest\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fi\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"caption\":\"thecodest\"},\"url\":\"https:\\\/\\\/thecodest.co\\\/fi\\\/author\\\/thecodest\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Syvempi katsaus suosituimpiin React-koukkuihin - The Codest","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/thecodest.co\/fi\/blogi\/syvempi-katsaus-suosituimpiin-react-koukkuihin\/","og_locale":"fi_FI","og_type":"article","og_title":"A Deeper Look at the Most Popular React Hooks","og_description":"In the course of many interviews, I noticed that even experienced programmers have a problem with distinguishing Hooks, not to mention their more advanced capabilities. So, I will try to explain in this article how Hooks should be used.","og_url":"https:\/\/thecodest.co\/fi\/blogi\/syvempi-katsaus-suosituimpiin-react-koukkuihin\/","og_site_name":"The Codest","article_published_time":"2021-12-07T08:18:30+00:00","article_modified_time":"2026-04-28T14:05:27+00:00","og_image":[{"width":960,"height":540,"url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/react-hooks.png","type":"image\/png"}],"author":"thecodest","twitter_card":"summary_large_image","twitter_misc":{"Written by":"thecodest","Est. reading time":"9 minuuttia"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thecodest.co\/blog\/a-deeper-look-at-the-most-popular-react-hooks\/#article","isPartOf":{"@id":"https:\/\/thecodest.co\/blog\/a-deeper-look-at-the-most-popular-react-hooks\/"},"author":{"name":"thecodest","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76"},"headline":"A Deeper Look at the Most Popular React Hooks","datePublished":"2021-12-07T08:18:30+00:00","dateModified":"2026-04-28T14:05:27+00:00","mainEntityOfPage":{"@id":"https:\/\/thecodest.co\/blog\/a-deeper-look-at-the-most-popular-react-hooks\/"},"wordCount":1702,"commentCount":0,"publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"image":{"@id":"https:\/\/thecodest.co\/blog\/a-deeper-look-at-the-most-popular-react-hooks\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/react-hooks.png","articleSection":["Software Development"],"inLanguage":"fi","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/thecodest.co\/blog\/a-deeper-look-at-the-most-popular-react-hooks\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/thecodest.co\/blog\/a-deeper-look-at-the-most-popular-react-hooks\/","url":"https:\/\/thecodest.co\/blog\/a-deeper-look-at-the-most-popular-react-hooks\/","name":"Syvempi katsaus suosituimpiin React-koukkuihin - The Codest","isPartOf":{"@id":"https:\/\/thecodest.co\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thecodest.co\/blog\/a-deeper-look-at-the-most-popular-react-hooks\/#primaryimage"},"image":{"@id":"https:\/\/thecodest.co\/blog\/a-deeper-look-at-the-most-popular-react-hooks\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/react-hooks.png","datePublished":"2021-12-07T08:18:30+00:00","dateModified":"2026-04-28T14:05:27+00:00","breadcrumb":{"@id":"https:\/\/thecodest.co\/blog\/a-deeper-look-at-the-most-popular-react-hooks\/#breadcrumb"},"inLanguage":"fi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thecodest.co\/blog\/a-deeper-look-at-the-most-popular-react-hooks\/"]}]},{"@type":"ImageObject","inLanguage":"fi","@id":"https:\/\/thecodest.co\/blog\/a-deeper-look-at-the-most-popular-react-hooks\/#primaryimage","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/react-hooks.png","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/react-hooks.png","width":960,"height":540},{"@type":"BreadcrumbList","@id":"https:\/\/thecodest.co\/blog\/a-deeper-look-at-the-most-popular-react-hooks\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thecodest.co\/"},{"@type":"ListItem","position":2,"name":"A Deeper Look at the Most Popular React Hooks"}]},{"@type":"WebSite","@id":"https:\/\/thecodest.co\/#website","url":"https:\/\/thecodest.co\/","name":"Codest","description":"","publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thecodest.co\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fi"},{"@type":"Organization","@id":"https:\/\/thecodest.co\/#organization","name":"Codest","url":"https:\/\/thecodest.co\/","logo":{"@type":"ImageObject","inLanguage":"fi","@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","width":144,"height":36,"caption":"The Codest"},"image":{"@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/pl.linkedin.com\/company\/codest","https:\/\/clutch.co\/profile\/codest"]},{"@type":"Person","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76","name":"thecodest","image":{"@type":"ImageObject","inLanguage":"fi","@id":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","caption":"thecodest"},"url":"https:\/\/thecodest.co\/fi\/author\/thecodest\/"}]}},"_links":{"self":[{"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/posts\/3008","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/comments?post=3008"}],"version-history":[{"count":23,"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/posts\/3008\/revisions"}],"predecessor-version":[{"id":7703,"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/posts\/3008\/revisions\/7703"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/media\/3009"}],"wp:attachment":[{"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/media?parent=3008"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/categories?post=3008"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/tags?post=3008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}