[{"_1":2,"_153":-5,"_154":-5},"loaderData",{"_3":4,"_13":14,"_21":22,"_132":133},"root",{"_5":-5,"_6":-7,"_7":8,"_9":-7,"_10":11,"_12":-7},"currentUser","primaryEmail","siteVerification","6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI","toast","enableDev",false,"incidentStatus","routes/_layout",{"_15":-5,"_16":17,"_18":17,"_19":11,"_20":11},"username","isAskGordonEnabled",true,"isUsingNewTemplate","showMinimalLanding","showHoneypotTrap","routes/_layout.r.$namespace.$reponame",{"_23":24,"_25":-5,"_26":11,"_27":11,"_28":29,"_30":31,"_32":-5,"_33":11,"_34":35,"_84":-5,"_85":86,"_125":-5,"_126":11,"_127":17,"_128":11,"_129":-5,"_130":131},"canonicalUrl","https://hub.docker.com/r/mltdocker/react-converting-to-a-hook_app/tags","mcpServer","canSeeDockerfile","canSeeAutobuilds","namespace","mltdocker","reponame","react-converting-to-a-hook_app","cloudBuildSource","isAutobuildsAvailable","repo",{"_36":37,"_38":39,"_41":42,"_43":44,"_45":11,"_46":47,"_48":49,"_50":51,"_53":31,"_28":29,"_54":55,"_56":40,"_57":58,"_59":60,"_61":62,"_63":-5,"_64":58,"_65":66,"_67":11,"_68":29,"_69":70,"_75":11,"_76":77,"_81":29,"_82":83},"categories",[],"content_types",[40],"image","date_registered","2020-12-23T15:06:17.20715Z","description","React converting to a hook with useState and useEffect App Demo","is_private","last_updated","2020-12-23T15:06:17.514092Z","last_modified","2024-10-16T13:48:34.145251Z","media_types",[52],"application/vnd.docker.container.image.v1+json","name","pull_count",310,"repository_type","star_count",0,"status",1,"status_description","active","source","collaborator_count","full_description","# Converting React Class Component to Hook via useState\nHooks are all the rage in React, especially now that they are stable as of React v16.8! The Hooks Proposal is an attempt to address several major concerns developers have with React. Essentially, a Hook is a special function that allows you to “hook into” React features. Hooks are ideal if you’ve previously written a functional component and realized that you need to add state to it.\n\nIf you’re new to Hooks and would like an overview, check out our introduction to React Hooks.\n\nIn this tutorial, we’re going to take a previously written class-based component and convert it into a functional component using the useState Hook.\nuseState Overview\n\nSimply put, useState declares a state variable to preserve values between function calls. The variables are preserved by React. useState only takes one argument that initializes the value of the state that you’re setting. By implementing useState we no longer need this.whatever, we can access the variable directly.\n## Getting Started\nTo help speed things along, we’ve prepared some starter code. In the starter code, we installed the latest version of react and react-dom as well as reactstrap to help us have some easy formatting.\n\nTo get started:\n\n $ docker run -d -p 3001:3000 mltdocker/react-converting-to-a-hook_app\n switching component/ClassBasedForm, ClassBasedForm1, ClassBasedComponent to display diferrent output on Browser.\n $ sudo docker exec -it <<>> bash\n\n## Adding Functionality Back\n\nNow let’s revise our functions to utilize Hooks.\n\nLet’s take a look at how we updated state in our class-based component:\n\n onChange={ (event) => this.setState({ email: event.target.value })\n\nWith hooks, we no longer need this or this.setState() since we’re already initiating our state variables and attaching a setter. Since we only have two variables we’re using, we’re going to use an inline function to call the setter that we initiated in useState for each input. We’ll also add our value back without the this prefix.\n \n setEmail(event.target.value) }\n />\n \n setPassword(event.target.value) }\n />\n\n \n\nIf we had several variables and wanted to share them between components, we would use an additional hook that we’ll cover in a later article.\n\nNow let’s rewrite our handleSubmit function.\n\nHere’s how the function was previously written:\n\n handleSubmit(e) {\n e.preventDefault();\n console.log(this.state);\n }\n \n## Tip! In React 16, if you write this as an arrow function, you won’t need to bind it in the constructor.\n\nWe now need to create a const for the function. We again prevent the default functionality, set the variables, and console.log them.\n\n const handleSubmit = e => {\n e.preventDefault();\n console.log(email);\n console.log(password);\n }\n\n \nNow we can add our handleSubmit function to the onSubmit in our form.\n\nHere’s how your new functional hook should look:\n\n import React, { useState } from 'react'\n import {\n Form, FormGroup, Input, Label, Col, Button,\n } from 'reactstrap';\n \n const FunctionBasedForm = () => {\n const [email, setEmail] = useState('');\n const [password, setPassword] = useState('');\n \n const handleSubmit = event => {\n event.preventDefault();\n console.log(email);\n console.log(password);\n }\n \n return (\n \n )\n };\n \n export default FunctionBasedForm;\n \n \n\nFlip back over to your browser and add some values to your form and hit submit. If your app console.log()s came back with the variables you entered, you’re golden! Well done!\n\n# React-replacing-component-lifecycles-with-useEffect\nReact Hooks are revolutionizing the way we develop in React and solving some of our biggest concerns. The useEffect Hook allows us to replace repetitive component lifecycle code.\n\nEssentially, a Hook is a special function that allows you to “hook into” React features. Hooks are a great solution if you’ve previously written a functional component and realize that you need to add state to it.\n\nIf you’re new to Hooks and would like an overview, check out the introduction to React Hooks.\n\nThis article assumes that you’re familiar with the useState Hook. If you’re not, never fear! If you spend a little time with Convert a React Class-Based Component to a Functional One Using a State Hook you’ll be on the right track!\n\n## About useEffect\nuseEffect is short for ‘use side effect’. Effects are when our application reacts with the outside world, like working with an API. It allows us to run a function based on whether something changed. useEffect also allows us to combine componentDidMount and componentDidUpdate.\n\n## About this App\nWe’ll be taking some prewritten class-based code and converting it to a functional component. We’ll be using reactstrap to simplify our formatting and axios to call an external dummy API.\n\nSpecifically, we’re using jsonplaceholder to pull-in dummy user data on our initial component mount.\n\n## Elaborate lifecycle methods\nTake a moment to familiarize yourself with the code, in particular, the ClassBasedComponent.js file.\n\nYou’ll notice that we have two lifecycle methods in this file, componentDidMount and componentDidUpdate.\n\n async componentDidMount() {\n const response = await axios\n .get(`https://jsonplaceholder.typicode.com/users`);\n\n this.setState({ users: response.data });\n };\n\n async componentDidUpdate(prevProps) {\n if (prevProps.resource !== this.props.resource) {\n const response = await axios\n .get(`https://jsonplaceholder.typicode.com/users`);\n\n this.setState({ users: response.data });\n }\n };\n \nThese are both async lifecycle methods that call the jsonplaceholder API to bring in a list of users.\n\nIn componentDidMount, we say on first render, get the user data. Next, on componentDidUpdate we look to see if anything has changed in props. This can be triggered from use\n\nWe would like to condense the lifecycle methods into the useEffect Hook and create a function-based component.\n\n## Create a Component\nRather than using the same ClassBasedComponent.js file, create a new file called FunctionBasedComponent.js. We’re creating a new file so that we can contrast and compare the two.\n\nIn your terminal, you can run the following to create the new file from your root directory:\n\n $ touch FunctionBasedComponent.js\n \nTo help get started, copy and paste the code below into your new file:\n\n import React, { useState, useEffect } from 'react';\n import { Container, Button, Row } from 'reactstrap';\n import axios from 'axios';\n\n const FunctionBasedComponent = () => {\n return (\n \n

My Contacts:

\n \n )\n };\n\n export default FunctionBasedComponent;\n \nNow hop over to your App.js file, import your FunctionBasedComponent.js file and replace ClassBasedComponent with FunctionBasedComponent.\n\nour starting useEffect app\n\nLet’s start by initializing state with useState.\n\n const [ users, setUsers ] = useState([]);\n const [ showDetails, setShowDetails ] = useState(false);\n \nTo quickly recap on useState, to initialize state with the useState hook, we declare both our variable and the function that corresponds to the variable in an array and the\n\nThe users state variable is initialized with an empty array and given the function of setUsers.\nThe showDetails state variable is initialized with the value of false and assigned the function of setShowDetails.\n## Add an API Call\nLet’s go ahead and add in our API call as the fetchUsers function.\n\n const fetchUsers = async () => {\n const response = await axios.get(`https://jsonplaceholder.typicode.com/users`);\n\n setUsers(response.data);\n };\n \nWe are essentially pulling this async call from the former componentDidMount and componentDidUpdate functions.\n\nKeep in mind we cannot use an async function directly inside useEffect. If we ever want to call an async function, we need to define the function outside of useEffect and then call it within useEffect.\n\n## The useEffect Argument\nLet’s talk about the useEffect hook for a moment. Much like componentDidMount, useEffect will immediately call our function.\n\n useEffect( () => {}, [ 'value' ]);\n \nBy default, useEffect looks to see if the array values are different and if they are different, the arrow function is automatically called.\n\n useEffect( () => {}, [ 'different value' ]);\n \nLet’s flip back to our code editor and add the useEffect hook below our latest function where we will call fetchUsers.\n\nIn the code below, we’re looking at the users object to see if there are changes.\n\n useEffect( () => { fetchUsers(users) }, [ users ] );\n \n## Common Issues\nIf you don’t pass an array into the useEffect Hook, your component will continuously reload repeatedly.\n \n useEffect( () => { fetchUsers(users) } );\n \nIf you pass an empty array, we are not watching any variables, and therefore it will only update state on the first render, exactly like componentDidMount.\n \n useEffect( () => { fetchUsers(users) }, [] );\n \nEvery time we create an object in JavaScript, it is a different object in memory. Though the code below looks the same, the page will be re-rendered because each object is \n \n useEffect( () => { fetchUsers(users) }, [{ user: 'BeesCloud' }] );\n \nIs not equal to!\n useEffect( () => { fetchUsers(users) }, [{ user: 'BeesCloud' }] );\n \nuseEffect function must return a cleanup function or nothing.\nTo demonstrate triggering another re-render, copy and paste the code below into your FunctionBasedComponent.js file:\n\n import React, { useState, useEffect } from 'react';\n import { Container, Button, Row } from 'reactstrap';\n import axios from 'axios';\n\n const FunctionBasedComponent = () => {\n const [ users, setUsers ] = useState([]);\n const [ showDetails, setShowDetails ] = useState(false);\n\n const fetchUsers = async () => {\n const response = await axios.get(`https://jsonplaceholder.typicode.com/users`);\n\n setUsers(response.data);\n };\n\n useEffect( () => { fetchUsers(users) }, [ users ] );\n\n const handleClick = event => { setShowDetails(!showDetails) };\n\n return (\n \n {\n users.map((user) => (\n

\n { user.name }\n
\n \n { showDetails ? \"Close Additional Info\" : \"More Info\" }\n \n { showDetails &&\n \n \n { `Email: ${ user.email }` }\n \n \n { `Phone: ${ user.phone }` }\n \n \n { `Website: ${ user.website }` }\n \n \n }\n
\n

\n ))\n }\n \n )\n }\n\n export default FunctionBasedComponent;\n \nNow we have an onClick event within a button. On the button click, the state of showDetails is changed, triggering a re-render that will call again to the API and bring in the additional details that we need.\n\n## Voilà!\n async componentDidMount() {\n const response = await axios.get(`https://jsonplaceholder.typicode.com/users`)\n this.setState({ users: response.data })\n };\n\n async componentDidUpdate(prevProps) {\n if (prevProps.resource !== this.props.resource) {\n const response = await axios.get(`https://jsonplaceholder.typicode.com/users`)\n this.setState({ users: response.data })\n }\n };\n \n## Becomes:\n const fetchUsers = async () => {\n const response = await axios.get(`https://jsonplaceholder.typicode.com/users`);\n\n setUsers(response.data);\n };\n\n useEffect( () => { fetchUsers(users) }, [ users ] );\n\nTo shut-down and completely erase all\n\n $ docker-compose down --rm all\n\nPlease whatsApp +65-8201-0159 or drop me an email at mlt@beesdot.com for whatever reason? FREE STUFF : free office, online storage and AI at https://www.beesdot.com !","has_starred","hub_user","immutable_tags_settings",{"_71":11,"_72":73},"enabled","rules",[74],".*","is_automated","permissions",{"_78":17,"_79":11,"_80":11},"read","write","admin","user","storage_size",143276793,"orgData","recentTags",[87],{"_88":40,"_89":90,"_91":92,"_93":94,"_95":96,"_46":114,"_115":90,"_116":29,"_117":52,"_53":118,"_119":120,"_121":105,"_122":114,"_123":62,"_124":17},"content_type","creator",8932452,"full_size",143266173,"id",131229435,"images",[97],{"_98":99,"_100":101,"_102":103,"_104":105,"_106":107,"_108":109,"_110":103,"_111":-5,"_112":92,"_59":62,"_113":-5},"architecture","amd64","digest","sha256:615925967fcc2440a1c6ad1aace17c3333238a58bfb981c5eeb504fb4f65d0ee","features","","last_pulled","2026-09-16T14:40:45.478061987Z","last_pushed","2020-12-23T15:06:17Z","os","linux","os_features","os_version","size","variant","2020-12-23T15:06:17.021726Z","last_updater","last_updater_username","media_type","latest","repository",10531544,"tag_last_pulled","tag_last_pushed","tag_status","v2","sbxKitMetadata","isPotentialSpam","isHubSbxKitsEnabled","displaySecurityMetadata","tagAttestations","tagsHaveAttestations",[],"routes/_layout.r.$namespace.$reponame.tags",{"_34":134,"_141":142,"_130":151,"_152":11},{"_36":135,"_38":136,"_41":42,"_43":44,"_45":11,"_46":47,"_48":49,"_50":137,"_53":31,"_28":29,"_54":55,"_56":40,"_57":58,"_59":60,"_61":62,"_63":-5,"_64":58,"_65":66,"_67":11,"_68":29,"_69":138,"_75":11,"_76":140,"_81":29,"_82":83},[],[40],[52],{"_71":11,"_72":139},[74],{"_78":17,"_79":11,"_80":11},"tags",{"_143":60,"_144":-5,"_145":-5,"_146":147},"count","next","previous","results",[148],{"_88":40,"_89":90,"_91":92,"_93":94,"_95":149,"_46":114,"_115":90,"_116":29,"_117":52,"_53":118,"_119":120,"_121":105,"_122":114,"_123":62,"_124":17},[150],{"_98":99,"_100":101,"_102":103,"_104":105,"_106":107,"_108":109,"_110":103,"_111":-5,"_112":92,"_59":62,"_113":-5},[],"canDeleteTags","actionData","errors"]

Function Based Form

My Contacts:

mltdocker/react-converting-to-a-hook_app

Tags for mltdocker/react-converting-to-a-hook_app