{"id":4457,"date":"2020-03-04T19:29:21","date_gmt":"2020-03-04T19:29:21","guid":{"rendered":"https:\/\/tinjurewp.com\/jsblog\/?p=4457"},"modified":"2020-03-04T19:29:21","modified_gmt":"2020-03-04T19:29:21","slug":"learning-to-use-react-hooks","status":"publish","type":"post","link":"https:\/\/learncode.tinjurewp.com\/learning-to-use-react-hooks\/","title":{"rendered":"Learning Use React Hooks"},"content":{"rendered":"

Note: This post is part 1<\/strong> of three-parts Understanding react hooks<\/em><\/strong> post series. This learning post is still in active development and updated regularly.<\/p>\n

React hooks were introduced in React 16.8 release<\/a>. React Doc<\/a> describes hooks as “functions that let you ‘hook into<\/em>‘ React state and lifecycle features from function components. Hooks don\u2019t work inside classes \u2014 they let you use React without classes.” In making sense of React<\/a>, Dan Abramov<\/a> writes “unlike patterns like render props or higher-order components, Hooks don\u2019t introduce unnecessary nesting into your component tree. They also don\u2019t suffer from the drawbacks of mixins”.<\/p>\n

The main objective of this learning series is to understand the React Hooks, get started with an Overview of Hooks, then learn some basic use case examples and learn more deeply React context API.<\/p>\n

Learning series<\/strong>
\nPart 1<\/strong>: React Hooks – An Overview (this post<\/strong>)
\nPart 2: Using UseStaticQuery Hook in a Gatsby Site
\nPart 3: Using React Context API in Gatsby site<\/div>\n

The objective this part 1<\/strong> of the React Hooks series is to get an overview of basic react hooks: useState()<\/code>, useEffect()<\/code> and useContext()<\/code>.<\/p>\n

Prerequisite<\/h6>\n

To fully understand the React Hooks, it is essential to understand React classes<\/a> and React State & lifecycle<\/a>. In this learning series only an overview of React Hooks & its simple use in Gatsby site will be discussed.<\/p>\n

Deep dive into React Classes<\/a>, State & lifecycle<\/a> will be discussed in separate learning note series.<\/p>\n

React Hooks – An Overview<\/h3>\n
What are Hooks?<\/h6>\n

The React Doc<\/a> describes Hooks “let you use state and other React features without writing a class”. This also allows to write customized Hooks<\/strong> to share reusable stateful logic between components.<\/p>\n

The React hooks are regular functions that are imported directly from React library and can be used in React components. The React document<\/a> lists a total 10 hooks of which following useState<\/code>, useEffect<\/code> and useContext<\/code> are described as the most basic hooks<\/a>.<\/p>\n

The useState<\/code> Hook<\/strong><\/h6>\n

The useState<\/code><\/a> hook is “similar to this.state<\/code> in class component, except it doesn’t merge the old & new state together’. This can be inside a function to add local state to it.<\/p>\n

The following Kingsley Silas <\/a> example from the CSS-TRICKS post<\/a>.<\/p>\n

\/\/source: https:\/\/css-tricks.com\/intro-to-react-hooks\/\nclass MyComponent extends React.component {\n  constructor(props)\n  super(props);\n  this.state = {\n    name: John Smith \/\/  default state value    \n  }\n}<\/code><\/pre>\n
In the Class Component example above, a class is initialize with this.state (lines: 5-6).\u00a0 The above example can be refactored using useState<\/code> hook as shown below:<\/p>\n
\/\/source: https:\/\/css-tricks.com\/intro-to-react-hooks\/\nimport { useState } from 'react';\n    \nfunction MyComponent() {\n \/\/define & call state variable\n  const [name, setName] = useState('John Smith');\n  \n  return\n    <div>\n      <p>Hello!, {name}<\/p>\n    <\/div>\n}\n\/\/ OUPUT\nHello! John smith<\/code><\/pre>\n
In this code example above, the useState<\/code> hook is used outside of class and the state can be defined with an array containing two variables as (name<\/code>) and call with (setName<\/code>) inside a React component (line 6). The value of name<\/code> variable is ‘John smith<\/code>‘ where as setName<\/code> is a function that can be used to update the value.<\/p>\n
The default setName<\/code> & setOtherName<\/code> variables can be updated as described in this React Doc<\/a> example using multiple state variables (below):<\/p>\n
\/\/src\/app.js\nimport React, { useState } from 'react';\n\nfunction App() {\n  const [name, setName] = useState('Peter');\n  const [otherName, setOtherName] = useState('Barney Stinson');\n\n  return (\n    <section className="main">\n     <p>Hello, {name}!<\/p>\n     <button onClick={() => setName('John Smith')}>\n        Click me\n      <\/button>\n      <div>\n      <p>Hello, {otherName}!<\/p>\n      <button onClick={() => setOtherName('Sam Golberg')}>\n        Click me\n      <\/button>\n      <\/div>\n    <\/section>\n  );\n}\nexport default App;<\/code><\/pre>\n
In the example above first, useState<\/code> hook was imported (line 2) which allows to use local state in functional component. Next, multiple state variables (name<\/code> & setName<\/code>) were defined inside App<\/strong> component with a default value of ‘Peter’\u00a0 and ‘Berney Stinson’ (lines: 5-6). The name<\/code> state is the property and setName<\/code> (a function) which holds the state of the onClick<\/code> element (an updated value). Likewise, the otherName<\/code> and setOtherName<\/code> state hold the default value of state (John smith) & updated value as ‘Sam Golberg’.\u00a0 As React doc<\/a> describes,\u00a0 when the button is clicked, the setName<\/code> or setOtherName<\/code> function is called then React re-renders passing the updated values (lines: 11 & 16).<\/p>\n
\"\"