--- title: React the easy way, with Hooks description: Reacting with Hooks is easy. But we will show you how to make it even easier with TypeScript because most of the code is always the same. image: https://blog.hansevision.com/hubfs/code-820275.jpg_large-3.jpg --- [![HV_BechtleGroup_sRGB_Black_2025 (3)](https://blog.hansevision.com/hs-fs/hubfs/Website%20Weebly%20Bildmaterialien/Logos/HV_BechtleGroup_sRGB_Black_2025%20(3).png?width=225&height=45&name=HV_BechtleGroup_sRGB_Black_2025%20(3).png)](https://www.hansevision.com/) [Blog](https://blog.hansevision.com) Lösungen Leistungen [Über uns](https://www.hansevision.com/hansevision.html) Karriere [Kontakt](https://www.hansevision.com/kontakt.html) [![HV_BechtleGroup_sRGB_Black_2025 (3)](https://blog.hansevision.com/hs-fs/hubfs/Website%20Weebly%20Bildmaterialien/Logos/HV_BechtleGroup_sRGB_Black_2025%20(3).png?width=163&height=32&name=HV_BechtleGroup_sRGB_Black_2025%20(3).png)](https://www.hansevision.com/) [Blog](https://blog.hansevision.com) Lösungen Leistungen [Über uns](https://www.hansevision.com/hansevision.html) Karriere Zurück 1 Minuten Lesezeit 12.06.2019 [Tutorial](https://blog.hansevision.com/tag/tutorial) [Coding](https://blog.hansevision.com/tag/coding) ![Bild von Dan Deaconu](https://blog.hansevision.com/hubfs/Theme%20Development/user-large-solid.svg) [Dan Deaconu](https://blog.hansevision.com/author/dan-deaconu) # React the easy way, with Hooks --- ## React is already easy, write it with TypeScript and it gets even more easy. But did you ever notice that most of the code is always the same? Writing your components in Classes was the way to go until Version 16.8. The Dev Team noticed that most of the code base repeats itself. But why? Where does the overhead come from? The quick answer: Syntax 🤯 With Classes you need to write a lot of code, interfaces, and so on. Think about accessing props. You need to write *this.props.title* but we don’t want to do that, we want to write just *title* Ok, easy, we don’t write a Class, we write a Pure Function. Props problem solved 👍 But what about state, life cycle, etc? 👎   ## Introducing React Hooks 📌 To get a state one can use the useState() function. This returns an array \[property, setProperty\] object. Pretty easy. Is it type safe? Yes. Can I put anything I want in useState()? Yes! Let’s see an example of how this works: ``` const [isOn, setIsOn] = useState(false); return (
the {appliance} is {isOn ? "on" : "off"} setIsOn(!isOn)}>power button
); ``` [![Code](https://blog.hansevision.com/hs-fs/hubfs/Imported_Blog_Media/Capture-2.png?width=584&height=161&name=Capture-2.png)](https://static.hsstatic.net/BlogImporterAssetsUI/ex/missing-image.png)   **Wait what? Where’s the rest?** Let’s do a side by side comparison and see what we have, and we can cut out. [![Code](https://blog.hansevision.com/hs-fs/hubfs/Imported_Blog_Media/Capture2.png?width=804&height=545&name=Capture2.png)](https://static.hsstatic.net/BlogImporterAssetsUI/ex/missing-image.png) [![Code](https://blog.hansevision.com/hs-fs/hubfs/Imported_Blog_Media/Capture3.png?width=584&height=260&name=Capture3.png)](https://static.hsstatic.net/BlogImporterAssetsUI/ex/missing-image.png)   **So what’s missing in the second picture?** The Interfaces for the Props and State are no longer needed, the function () => takes care of that. The constructor is no longer needed, the render function is no longer needed. Quite a lot. But still the component can be used like any other: [![Code](https://blog.hansevision.com/hs-fs/hubfs/Imported_Blog_Media/Capture4-1.png?width=543&height=314&name=Capture4-1.png)](https://static.hsstatic.net/BlogImporterAssetsUI/ex/missing-image.png) > Let’s see some proof 🔎 > > [![Video](https://blog.hansevision.com/hs-fs/hubfs/Imported_Blog_Media/2019-06-13_11-33-13.gif?width=508&height=258&name=2019-06-13_11-33-13.gif)](https://static.hsstatic.net/BlogImporterAssetsUI/ex/missing-image.png)     ![Bild von Dan Deaconu](https://blog.hansevision.com/hubfs/Theme%20Development/user-large-solid.svg) [Dan Deaconu](https://blog.hansevision.com/author/dan-deaconu) Diese Person ist nicht mehr bei der HanseVision tätig. [Alle Artikel des Autors](https://blog.hansevision.com/author/dan-deaconu) ### Ähnliche Blog-Artikel ![](https://blog.hansevision.com/hs-fs/hubfs/Theme%20Development/hansevision-newsletter.png?width=410&name=hansevision-newsletter.png) ### Mit unserem HanseVision Update sind Sie immer gut informiert über alle Themen rund um moderne Zusammenarbeit, Lösungen und Tools, Referenzen und Aktionen. [![Jetzt zum Newsletter anmelden](https://hubspot-no-cache-eu1-prod.s3.amazonaws.com/cta/default/24882854/c769ef8c-5eed-48ae-ada2-7fc72d656a50.png)](https://hubspot-cta-redirect-eu1-prod.s3.amazonaws.com/cta/redirect/24882854/c769ef8c-5eed-48ae-ada2-7fc72d656a50) Updates & Aktionen Versand alle 4-6 Wochen Trends & aktuelle Entwicklungen ![](https://blog.hansevision.com/hs-fs/hubfs/Theme%20Development/hansevision-newsletter.png?width=250&height=250&name=hansevision-newsletter.png) [![Jetzt zum Newsletter anmelden](https://hubspot-no-cache-eu1-prod.s3.amazonaws.com/cta/default/24882854/c769ef8c-5eed-48ae-ada2-7fc72d656a50.png)](https://hubspot-cta-redirect-eu1-prod.s3.amazonaws.com/cta/redirect/24882854/c769ef8c-5eed-48ae-ada2-7fc72d656a50) [Datenschutzerklärung](https://www.hansevision.com/datenschutzerklaerung.html) [Impressum](https://www.hansevision.com/impressum-688471.html) [AGB](https://www.hansevision.com/uploads/4/1/9/3/41931735/hansevision_agb_der_hansevision_gmbh_stand_31.03.2020.pdf) [Telefon: +49 (40) 2880 7590 - 0](tel:+4940288075900) Adresse: Atlantic Haus, Bernhard-Nocht-Strasse 113, 20359 Hamburg [Cookie-Richtlinien](https://www.hansevision.com/cookie-richtlinie.html) Cookie-Einstellungen ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Dan Deaconu", "url" : "https://blog.hansevision.com/author/dan-deaconu" }, "dateModified" : "2024-03-21T07:52:26.721Z", "datePublished" : "2019-06-12T22:00:00.000Z", "headline" : "React the easy way, with Hooks", "image" : [ "https://blog.hansevision.com/hubfs/code-820275.jpg_large-3.jpg" ], "mainEntityOfPage" : { "@id" : "https://blog.hansevision.com/react-the-easy-way-with-hooks", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://blog.hansevision.com/hubfs/HanseVision_sRGB_Black.png" }, "name" : "HanseVision GmbH" } } ```