{"id":2912,"date":"2021-10-05T00:44:41","date_gmt":"2021-10-05T00:44:41","guid":{"rendered":"https:\/\/contentlab.com\/react-hooks-how-to-transition-your-app-from-react-components-to-hooks\/"},"modified":"2021-11-16T14:54:45","modified_gmt":"2021-11-16T14:54:45","slug":"react-hooks-how-to-transition-your-app-from-react-components-to-hooks","status":"publish","type":"post","link":"https:\/\/contentlab.com\/react-hooks-how-to-transition-your-app-from-react-components-to-hooks\/","title":{"rendered":"React Hooks &#8211; How to Transition your App from React Components to Hooks"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2912\" class=\"elementor elementor-2912\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-10442f08 elementor-section-boxed elementor-section-height-default elementor-section-height-default qodef-elementor-content-no\" data-id=\"10442f08\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7fc75f1a\" data-id=\"7fc75f1a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c9c6d2e elementor-widget elementor-widget-text-editor\" data-id=\"c9c6d2e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.21.0 - 25-04-2024 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p>React Hooks are a new feature added in the 16.8 release of the React JavaScript library. Hooks were intended to make it easy to use state and other reusable functionality in functional components. Before hooks, reusable functionality relied on class-based components and often required the user to use higher-order components (HOCs) and render props. While HOCs and render props are great on their own, they quickly become awkward when you try to use each of them multiple times in a single component.<\/p><h2 id=\"why-care-about-react-hooks-\">Why Care About React Hooks?<\/h2><p>If class components are working well for you, then you might wonder if learning about hooks is worth your time. I believe they\u2019re worth it for several reasons.<\/p><p>First, the\u00a0<a href=\"https:\/\/contentlab.com\/react-hooks-how-to-transition-your-app-from-react-components-to-hooks\/\">React<\/a>\u00a0community is quick to adopt new practices and abandon old ones. The React team has heavily promoted hooks as the path toward writing React code that is clearer and easier to understand. Dan Abramov, a popular member of the React dev team, is a\u00a0<a href=\"https:\/\/medium.com\/@dan_abramov\/making-sense-of-react-hooks-fdbde8803889\" target=\"_blank\" rel=\"noopener noreferrer\">very strong proponent of hooks<\/a>. And where the React dev team leads, the React community usually follows.<\/p><p>This tendency to follow trends isn\u2019t unique to the React community, and it doesn\u2019t mean that class components are going away. They currently make up the bulk of most large React applications, and I expect that to remain true for the foreseeable future.<\/p><p>But over time, I expect that many interesting libraries and utilities will only work with hooks. Hook-based libraries can make it very easy to work with forms, animations, and external data sources like web sockets. The catch is that you can\u2019t use hooks in class-based components.<\/p><p>Library authors are going to have to make a choice, and it appears that hooks will be what they choose as long as the React dev team is promoting hooks as the preferred path forward. As a developer, hooks also offer you the opportunity to write more concise code that is easier to debug and understand; they\u2019re not just a pointless trend that offers no benefit.<\/p><p>You definitely shouldn\u2019t abandon class components if you love using them. They\u2019re still great, and they\u2019re still a big improvement over using\u00a0<code>React.createClass<\/code>\u00a0back in the React dark ages of 2013. But if you\u2019re working on React apps as a member of a large team or make use of many external libraries, you\u2019re going to encounter hooks in the wild sooner or later.<\/p><h3 id=\"what-react-hooks-do\">What React Hooks Do<\/h3><p>Hooks offer a way to extract stateful logic from a component to make that logic easy to test and reuse. As a result, hooks can be used as an elegant replacement for sometimes-hacky workarounds like nested higher order components, providers, and render props. None of these features alone are bad, but as we touched on earlier, having to use all of them together in a single component can be a source of\u00a0<a href=\"https:\/\/www.nutshell.com\/blog\/accidental-complexity-software-design\/\" target=\"_blank\" rel=\"noopener noreferrer\">accidental complexity<\/a>.<\/p><p>Hooks can also be used to split complex components into smaller files and keep related bits of functionality together. For example, in a class component that needs to subscribe to a WebSocket, some of the code will have to go in the\u00a0<code>componentWillMount<\/code>\u00a0lifecycle method, and some will have to go in the\u00a0<code>componentWillUnmount<\/code>\u00a0method. Using a hook, we could keep all of the WebSocket code together in a single hook function instead of splitting it across multiple lifecycle methods. In fact, this is exactly the example we\u2019re going to examine in the next section.<\/p><h3 id=\"converting-a-class-component-to-a-hook-component\">Converting a Class Component to a Hook Component<\/h3><p>Now that we\u2019ve discussed what hooks are and why you\u2019d want to use them, let\u2019s dive into the details of how to convert a class component to a hook component.<\/p><p>Note that you shouldn\u2019t feel the need to convert your class components to use hooks without a good reason. We\u2019ll be walking through the conversion process because starting with something you already know will make hooks easier to understand, and at the end of the exercise you\u2019ll end up with two identically functioning components that will help you easily compare and contrast the two approaches.<\/p><p>As an example, we\u2019re going to look at a React app that uses a class for a fairly common use case: making a WebSocket connection when the component mounts and closing the WebSocket connection when the component unmounts. The component is used as part of a simulated chat app.<\/p><p>You can find the example in a\u00a0<a href=\"https:\/\/stackblitz.com\/edit\/class-to-hook-example?file=WSClass.js\" target=\"_blank\" rel=\"noopener noreferrer\">StackBlitz workspace here<\/a>. The class component we\u2019re interested in is in the WSClass.js file. Let\u2019s take a look at its code:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fa4d811 elementor-widget elementor-widget-code-highlight\" data-id=\"fa4d811\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>import React from 'react';\r\nimport NavBar from '.\/containers\/NavBar';\r\nimport ChatWindow from '.\/containers\/ChatWindow';\r\nimport ChatEntry from '.\/containers\/ChatEntry';\r\n\r\nexport default class WsClass extends React.Component {\r\n\r\n  constructor() {\r\n    this.state = {\r\n      messages: [\"Test message\"],\r\n      newMessageText: \"\"\r\n    }\r\n  }\r\n\r\n  componentDidMount() {\r\n    this.socket = new WebSocket(\"wss:\/\/echo.websocket.org\");\r\n    this.socket.onmessage = (message) => {\r\n      const newMessage = `Message from WebSocket: ${message.data}`\r\n      this.setState({\r\n        messages: this.state.messages.concat([newMessage]) \r\n      })\r\n    }\r\n  }\r\n\r\n  componentWillUnmount() {\r\n    this.socket.close();\r\n  }\r\n\r\n  onMessageChange = (e) => {\r\n    this.setState({ newMessageText: e.target.value });\r\n  }\r\n\r\n  onMessageSubmit = () => {\r\n    this.socket.send(this.state.newMessageText);\r\n    this.setState({ newMessageText: \"\" });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n      <NavBar title={\"WebSocket Class Component\"} \/>\r\n      <ChatWindow messages={this.state.messages} \/>\r\n      <ChatEntry text={this.state.newMessageText}\r\n                 onChange={this.onMessageChange} \r\n                 onSubmit={this.onMessageSubmit}\/>\r\n      <\/>\r\n    );\r\n  }\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7a148f5 elementor-widget elementor-widget-text-editor\" data-id=\"7a148f5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>As you can see, this is the kind of component you\u2019ll encounter in a typical React app. In the constructor, we set up the component\u2019s initial state.<\/p><p>In\u00a0<code>componentDidMount<\/code>, we establish a WebSocket connection to\u00a0<code>wss:\/\/echo.websocket.org<\/code>. As its name implies, this is a socket that echoes back whatever we send to it, which is perfect for our example app.<\/p><p>In\u00a0<code>componentWillUnmount<\/code>, we call the close method on the WebSocket because we won\u2019t be using it anymore. Closing the connection when we\u2019re finished with it is important because in a real application with a chat window, there\u2019s a good chance we\u2019d be opening and closing the chat. If we don\u2019t close the connection when our component unmounts, it\u2019ll remain connected until the user reloads the page or navigates away to a different page. Over time, our app would use more and more memory until it crashes the user\u2019s browser!<\/p><p>We also add an event handler to handle the WebSocket\u2019s\u00a0<code>onmessage<\/code>\u00a0event. This handler will be triggered whenever we receive a message from the socket. Our handler function will receive a MessageEvent as its only parameter. The event object\u2019s data property contains the text of the message. Inside the event handler, we use\u00a0<code>this.SetState<\/code>\u00a0to add the data to our app state\u2019s messages array.<\/p><p>Next, in the render method, we lay out the components of our chat application.\u00a0<code>ChatWindow<\/code>\u00a0displays our chat messages, and\u00a0<code>ChatEntry<\/code>\u00a0lets us send chat messages. If you enter a message and click the send button, you\u2019ll see that the WebSocket server echoes it right back:<\/p><p><img decoding=\"async\" src=\"https:\/\/gccontent.blob.core.windows.net\/gccontent\/blogs\/grapecity\/20190731-moving-from-react-components-toreact-hooks\/1.png\" alt=\"React Hooks\" \/><\/p><p>Now that we\u2019ve seen how this app works as a class component, how would we go about creating it as a function component using hooks? If you\u2019d like to jump ahead and it in action, you can find the\u00a0<a href=\"https:\/\/stackblitz.com\/edit\/class-to-hook-example?file=WSHook.js\">final result on StackBlitz<\/a>\u00a0in the WSHook.js file. Otherwise, keep reading as we walk through the code.<\/p><p>Here\u2019s what our simulated hooks-based chat component looks like:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-18f2a8b elementor-widget elementor-widget-code-highlight\" data-id=\"18f2a8b\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>import React, {useState, useEffect, useRef } from 'react';\r\nimport NavBar from '.\/containers\/NavBar';\r\nimport ChatWindow from '.\/containers\/ChatWindow';\r\nimport ChatEntry from '.\/containers\/ChatEntry';\r\n\r\nexport default () => {\r\n  const [newMessage, setNewMessage] = useState(\"\");\r\n  const [messages, setMessages] = useState([\"Test message\"]);\r\n\r\n  const [state, setState] = useState({\r\n    messages: [\"Test message\"],\r\n    newMessageText: \"\" \r\n  });\r\n\r\n  const socket = useRef(new WebSocket(\"wss:\/\/echo.websocket.org\"))\r\n\r\n  useEffect(() => {\r\n    socket.current.onmessage = (msg) => {\r\n      const incomingMessage = `Message from WebSocket: ${msg.data}`;\r\n      setMessages(messages.concat([incomingMessage]));\r\n    }\r\n  });\r\n\r\n  useEffect(() => () => socket.current.close(), [socket])\r\n\r\n  const onMessageChange = (e) => {;\r\n    setNewMessage(e.target.value);\r\n  }\r\n\r\n  const onMessageSubmit = () => {\r\n    socket.current.send(newMessage);\r\n    setNewMessage(\"\")\r\n  }\r\n\r\n  return (\r\n      <>\r\n      <NavBar title={\"WebSocket Hook Component\"} \/>\r\n      <ChatWindow messages={messages} \/>\r\n      <ChatEntry text={newMessage}\r\n                 onChange={onMessageChange} \r\n                 onSubmit={onMessageSubmit}\/>\r\n      <\/>\r\n  );\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dc48d48 elementor-widget elementor-widget-text-editor\" data-id=\"dc48d48\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>You\u2019ll notice that it looks pretty similar to the class-based component. So similar that you might wonder if it was worth the work to convert it. And in reality, the answer is that in many cases, your class components are perfectly fine as-is, and converting them to use hooks is a waste of time.<\/p><p>Additionally, you\u2019ll find that in some cases, hooks make your components more difficult to reason about and understand. We\u2019ll address those issues as we walk through the code to ensure you can make an informed decision about when and where you\u2019ll want to use hooks.<\/p><p>We start our component with two uses of the\u00a0<code>useState<\/code>\u00a0hook: one to store the new message that we\u2019ll be sending over the WebSocket, and one that stores the array of messages that we\u2019ll be displaying in our chat window. This isn\u2019t too different from the way we used state in the class component \u2014 we just have our new message string and messages array in separate state variables instead of in a single state object.<\/p><p>Next, we call the\u00a0<code>useRef<\/code>\u00a0hook to set up our WebSocket.\u00a0<code>useRef<\/code>\u00a0is a handy helper that lets us set up a reference to a JavaScript object that persists between component renders. In a functional React component, the entire function is called every time the component re-renders in response to a state change. Usually this is fine, but sometimes we really need things to stick around \u2013 like our WebSocket. Without\u00a0<code>useRef<\/code>, our WebSocket would be re-created every time we type a letter into the text box, and soon we\u2019d have hundreds of open WebSocket connections.<\/p><p>Next, we have two calls to the\u00a0<code>useEffect<\/code>\u00a0hook.\u00a0<code>useEffect<\/code>\u00a0is the hook you\u2019ll want to use to replace the functionality of the class component lifecycle methods\u00a0<code>componentDidMount<\/code>\u00a0and\u00a0<code>componentWillUnmount<\/code>. When you call useEffect, you pass it a function that contains code that should run when the component mounts and returns a function that will be run when the component unmounts.<\/p><p>Here\u2019s a brief example to illustrate the concept:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ccd43ba elementor-widget elementor-widget-code-highlight\" data-id=\"ccd43ba\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>useEffect(() => {\r\n  console.log(\"Component is rendering\");\r\n  return () => { console.log(\"Component is being destroyed.\"); }\r\n})<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7c1096e6 elementor-widget elementor-widget-text-editor\" data-id=\"7c1096e6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>\u00a0<\/p><pre><span style=\"color: var( --e-global-color-text ); font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight ); font-size: 1rem;\">That\u2019s not too bad: just basic JavaScript, where a function returning a function is common. There\u2019s one catch with useEffect, though: by default, it\u2019ll run <\/span><em style=\"color: var( --e-global-color-text ); font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight ); font-size: 1rem;\">every<\/em><span style=\"color: var( --e-global-color-text ); font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight ); font-size: 1rem;\"> time the component re-renders. However, useEffect can take an array of dependencies as its second argument. When you specify a list of dependencies, the effect will <\/span><em style=\"color: var( --e-global-color-text ); font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight ); font-size: 1rem;\">only<\/em><span style=\"color: var( --e-global-color-text ); font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight ); font-size: 1rem;\"> run if one of those dependencies has changed.<\/span><\/pre><p>This is why we have two useEffect calls: we want to re-bind the WebSocket\u2019s onmessage handler on every render because our handler creates a closure around the <code>messages<\/code> variable, so failing to re-bind will cause our handler to use stale data, and our chat app won\u2019t work properly.<\/p><p>We don\u2019t want to close the WebSocket on every re-render, though, so we put the close handler in its own effect with socket in the array of dependencies we pass as the second argument to the <code>useEffect<\/code> call. This ensures that the socket will only be closed when the component is destroyed, which is what we want.<\/p><p>Using effect hooks in this way can be confusing to reason about, especially if you\u2019ve been working with class components for years. Sometimes, having named lifecycle methods will just be a better fit for the problem you\u2019re trying to solve. Hooks are great for many use cases, but class components aren\u2019t going to disappear. You should keep using them when you feel they\u2019re the right fit for the problem you\u2019re solving and use functional components and hooks where they\u2019ll make your code easier to understand.<\/p><p>After we\u2019ve set up our hooks, the rest of the component is largely the same as the class component. Instead of creating instance methods to handle updates, we\u2019ve assigned functions to variables that we can pass into the components that render our chat room.<\/p><p>Overall, the functional component with hooks is slightly more concise than the class component, at the expense of being slightly harder to reason about if you\u2019re accustomed to using class components.<\/p><p>One big advantage of hooks is that it would be relatively easy to extract the WebSocket functionality out into a custom hook that could easily be reused in other components. To do the same thing with a class component, we\u2019d have to create a higher order component which would take more work to create and would be more awkward to use.<\/p><h3 id=\"conclusion\">Conclusion<\/h3><p>And we\u2019re done! We\u2019ve successfully walked through the process of converting a stateful class component to a stateful hook component.<\/p><p>As we\u2019ve seen, hooks aren\u2019t magic. They don\u2019t do anything that class components couldn\u2019t do. They do help you write code that\u2019s more concise and easier to understand in some situations. It\u2019s entirely possible to keep basing your apps on class components and only create hook components when you need to interact with hooks-only libraries.<\/p><p>On the other hand, if you love hooks and want to use them everywhere, don\u2019t hold back! Given the level of enthusiasm for hooks from the <a href=\"https:\/\/contentlab.com\/react-hooks-how-to-transition-your-app-from-react-components-to-hooks\/\">React<\/a> dev team and the wider React community, hooks aren\u2019t likely to disappear any time soon.<\/p><p><em>This article was first published on <a href=\"https:\/\/www.grapecity.com\/blogs\/moving-from-react-components-to-react-hooks\">GrapeCity&#8217;s blog<\/a><\/em>.<\/p><p><em><span class=\"TextRun SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\">If you\u2019re interested in developing expert technical content that performs, <\/span><\/span><a class=\"Hyperlink SCXW156001673 BCX2\" href=\"https:\/\/contentlab.com\/contact\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"TextRun Underlined SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\" data-ccp-charstyle=\"Hyperlink\">let\u2019s have a conversation<\/span><\/span><\/a><span class=\"TextRun SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\"> today.<\/span><\/span><\/em><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>In this article we walk through the process of converting a stateful class component to a stateful hook component.<\/p>\n","protected":false},"author":3,"featured_media":4877,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[278,18,240],"tags":[272,269],"hashtags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React Hooks - How to Transition your App from React Components to Hooks &#183; Technical Content Marketing | ContentLab<\/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:\/\/www.grapecity.com\/blogs\/moving-from-react-components-to-react-hooks\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Hooks - How to Transition your App from React Components to Hooks &#183; Technical Content Marketing | ContentLab\" \/>\n<meta property=\"og:description\" content=\"In this article we walk through the process of converting a stateful class component to a stateful hook component.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.grapecity.com\/blogs\/moving-from-react-components-to-react-hooks\" \/>\n<meta property=\"og:site_name\" content=\"Technical Content Marketing | ContentLab\" \/>\n<meta property=\"article:published_time\" content=\"2021-10-05T00:44:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-11-16T14:54:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/3.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1746\" \/>\n\t<meta property=\"og:image:height\" content=\"530\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"ContentLab\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ContentLabIO\" \/>\n<meta name=\"twitter:site\" content=\"@ContentLabIO\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ContentLab\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.grapecity.com\/blogs\/moving-from-react-components-to-react-hooks#article\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/react-hooks-how-to-transition-your-app-from-react-components-to-hooks\/\"},\"author\":{\"name\":\"ContentLab\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532\"},\"headline\":\"React Hooks &#8211; How to Transition your App from React Components to Hooks\",\"datePublished\":\"2021-10-05T00:44:41+00:00\",\"dateModified\":\"2021-11-16T14:54:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/contentlab.com\/react-hooks-how-to-transition-your-app-from-react-components-to-hooks\/\"},\"wordCount\":1943,\"publisher\":{\"@id\":\"https:\/\/contentlab.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.grapecity.com\/blogs\/moving-from-react-components-to-react-hooks#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/3.png\",\"keywords\":[\"JavaScript\",\"React\"],\"articleSection\":[\"Hands-on Tutorial\",\"Portfolio\",\"Web\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/contentlab.com\/react-hooks-how-to-transition-your-app-from-react-components-to-hooks\/\",\"url\":\"https:\/\/www.grapecity.com\/blogs\/moving-from-react-components-to-react-hooks\",\"name\":\"React Hooks - How to Transition your App from React Components to Hooks &#183; Technical Content Marketing | ContentLab\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.grapecity.com\/blogs\/moving-from-react-components-to-react-hooks#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.grapecity.com\/blogs\/moving-from-react-components-to-react-hooks#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/3.png\",\"datePublished\":\"2021-10-05T00:44:41+00:00\",\"dateModified\":\"2021-11-16T14:54:45+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.grapecity.com\/blogs\/moving-from-react-components-to-react-hooks#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.grapecity.com\/blogs\/moving-from-react-components-to-react-hooks\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.grapecity.com\/blogs\/moving-from-react-components-to-react-hooks#primaryimage\",\"url\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/3.png\",\"contentUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/3.png\",\"width\":1746,\"height\":530},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.grapecity.com\/blogs\/moving-from-react-components-to-react-hooks#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/contentlab.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Hooks &#8211; How to Transition your App from React Components to Hooks\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/contentlab.com\/#website\",\"url\":\"https:\/\/contentlab.com\/\",\"name\":\"Technical Content Marketing | ContentLab\",\"description\":\"Technical Content Marketing Done Right.\",\"publisher\":{\"@id\":\"https:\/\/contentlab.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/contentlab.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/contentlab.com\/#organization\",\"name\":\"ContentLab.io\",\"url\":\"https:\/\/contentlab.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png\",\"contentUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png\",\"width\":768,\"height\":768,\"caption\":\"ContentLab.io\"},\"image\":{\"@id\":\"https:\/\/contentlab.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ContentLabIO\",\"https:\/\/www.linkedin.com\/company\/17893315\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532\",\"name\":\"ContentLab\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g\",\"caption\":\"ContentLab\"},\"description\":\"ContentLab provides high-quality written articles, tutorials, courses, and other technical marketing materials to industry leaders. We create no-nonsense tech content that\u2019s purpose-built to attract, educate, and engage your technical audience.\",\"sameAs\":[\"https:\/\/contentlab.op\"],\"url\":\"https:\/\/contentlab.com\/author\/contentlab\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React Hooks - How to Transition your App from React Components to Hooks &#183; Technical Content Marketing | ContentLab","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:\/\/www.grapecity.com\/blogs\/moving-from-react-components-to-react-hooks","og_locale":"en_US","og_type":"article","og_title":"React Hooks - How to Transition your App from React Components to Hooks &#183; Technical Content Marketing | ContentLab","og_description":"In this article we walk through the process of converting a stateful class component to a stateful hook component.","og_url":"https:\/\/www.grapecity.com\/blogs\/moving-from-react-components-to-react-hooks","og_site_name":"Technical Content Marketing | ContentLab","article_published_time":"2021-10-05T00:44:41+00:00","article_modified_time":"2021-11-16T14:54:45+00:00","og_image":[{"width":1746,"height":530,"url":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/3.png","type":"image\/png"}],"author":"ContentLab","twitter_card":"summary_large_image","twitter_creator":"@ContentLabIO","twitter_site":"@ContentLabIO","twitter_misc":{"Written by":"ContentLab","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.grapecity.com\/blogs\/moving-from-react-components-to-react-hooks#article","isPartOf":{"@id":"https:\/\/contentlab.com\/react-hooks-how-to-transition-your-app-from-react-components-to-hooks\/"},"author":{"name":"ContentLab","@id":"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532"},"headline":"React Hooks &#8211; How to Transition your App from React Components to Hooks","datePublished":"2021-10-05T00:44:41+00:00","dateModified":"2021-11-16T14:54:45+00:00","mainEntityOfPage":{"@id":"https:\/\/contentlab.com\/react-hooks-how-to-transition-your-app-from-react-components-to-hooks\/"},"wordCount":1943,"publisher":{"@id":"https:\/\/contentlab.com\/#organization"},"image":{"@id":"https:\/\/www.grapecity.com\/blogs\/moving-from-react-components-to-react-hooks#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/3.png","keywords":["JavaScript","React"],"articleSection":["Hands-on Tutorial","Portfolio","Web"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/contentlab.com\/react-hooks-how-to-transition-your-app-from-react-components-to-hooks\/","url":"https:\/\/www.grapecity.com\/blogs\/moving-from-react-components-to-react-hooks","name":"React Hooks - How to Transition your App from React Components to Hooks &#183; Technical Content Marketing | ContentLab","isPartOf":{"@id":"https:\/\/contentlab.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.grapecity.com\/blogs\/moving-from-react-components-to-react-hooks#primaryimage"},"image":{"@id":"https:\/\/www.grapecity.com\/blogs\/moving-from-react-components-to-react-hooks#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/3.png","datePublished":"2021-10-05T00:44:41+00:00","dateModified":"2021-11-16T14:54:45+00:00","breadcrumb":{"@id":"https:\/\/www.grapecity.com\/blogs\/moving-from-react-components-to-react-hooks#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.grapecity.com\/blogs\/moving-from-react-components-to-react-hooks"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.grapecity.com\/blogs\/moving-from-react-components-to-react-hooks#primaryimage","url":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/3.png","contentUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/3.png","width":1746,"height":530},{"@type":"BreadcrumbList","@id":"https:\/\/www.grapecity.com\/blogs\/moving-from-react-components-to-react-hooks#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/contentlab.com\/"},{"@type":"ListItem","position":2,"name":"React Hooks &#8211; How to Transition your App from React Components to Hooks"}]},{"@type":"WebSite","@id":"https:\/\/contentlab.com\/#website","url":"https:\/\/contentlab.com\/","name":"Technical Content Marketing | ContentLab","description":"Technical Content Marketing Done Right.","publisher":{"@id":"https:\/\/contentlab.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/contentlab.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/contentlab.com\/#organization","name":"ContentLab.io","url":"https:\/\/contentlab.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/contentlab.com\/#\/schema\/logo\/image\/","url":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png","contentUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png","width":768,"height":768,"caption":"ContentLab.io"},"image":{"@id":"https:\/\/contentlab.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ContentLabIO","https:\/\/www.linkedin.com\/company\/17893315\/"]},{"@type":"Person","@id":"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532","name":"ContentLab","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/contentlab.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g","caption":"ContentLab"},"description":"ContentLab provides high-quality written articles, tutorials, courses, and other technical marketing materials to industry leaders. We create no-nonsense tech content that\u2019s purpose-built to attract, educate, and engage your technical audience.","sameAs":["https:\/\/contentlab.op"],"url":"https:\/\/contentlab.com\/author\/contentlab\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/3.png","_links":{"self":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2912"}],"collection":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/comments?post=2912"}],"version-history":[{"count":6,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2912\/revisions"}],"predecessor-version":[{"id":5369,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2912\/revisions\/5369"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media\/4877"}],"wp:attachment":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media?parent=2912"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/categories?post=2912"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/tags?post=2912"},{"taxonomy":"hashtags","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/hashtags?post=2912"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}