{"componentChunkName":"component---src-templates-blog-post-js","path":"/react-hooks/","result":{"data":{"site":{"siteMetadata":{"title":"Freddy Bihozagara's Blog"}},"markdownRemark":{"id":"32a7da65-2c1f-5d9c-b3d6-72a4257f2e0a","excerpt":"React Hooks are a new addition in React 16.8. They allow the use of state without writing a class. Example: Class based components require the use of classes…","html":"

React Hooks are a new addition in React 16.8. They allow the

\n

use of state without writing a class.

\n

Example:

\n
// for example, when updating state, for a counter function, while calling onclick()\n\nimport React, { useState } from 'react';\n\nfunction Counter() {\n\n  const [counter, setCounter] = useState(0);\n\n  return (\n    <div>\n      <p> {counter} times</p>\n      <button onClick={() => setCounter(counter + 1)}>\n        Press\n      </button>\n    </div>\n  );\n}
\n

Class based components require the use of classes, hence

\n

they may take more time to write.

\n

However, it is always good to start with class components.

\n

As developers we must not forget that we are dealing with

\n

classes and objects.

\n

It is always good to err on the side of more OOP than the

\n

other way.

\n

With class based components, as soon as we make use of

\n

a constructor, we know that there is a class that inherits

\n

from a super class.

\n

For more on React Hooks: https://react-hooks.org/

","frontmatter":{"title":"React Hooks vs class based components","date":"December 05, 2020","description":"React Hooks vs class based components"}},"previous":{"fields":{"slug":"/git-add/"},"frontmatter":{"title":"Git-add"}},"next":{"fields":{"slug":"/jsx/"},"frontmatter":{"title":"JSX and double brackets"}}},"pageContext":{"id":"32a7da65-2c1f-5d9c-b3d6-72a4257f2e0a","previousPostId":"a67e5c0e-8e1b-5ec6-ab8e-fc08334231b1","nextPostId":"c2cb1581-5bc7-5c72-afca-14feceeb6d1a"}},"staticQueryHashes":["2841359383","916993862"]}