# React Hooks

**URL:** <https://forum.kirupa.com/t/react-hooks/638854>\
**Category:** web dev\
**Created:** [October 25, 2018, 8:11pm UTC](https://forum.kirupa.com/t/react-hooks/638854 "2018-10-25T20:11:45Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [October 25, 2018, 8:11pm UTC](https://forum.kirupa.com/t/react-hooks/638854/1 "2018-10-25T20:11:46Z")

</div>

Something new for React 16.7: Hooks

> **[Introducing Hooks – React](https://reactjs.org/docs/hooks-intro.html)**
>
> A JavaScript library for building user interfaces

Quick and dirty intro example is adding state to a functional component using the `useState` hook:

```auto
import { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

```

Basically, as a function component you have a function (`Example`) that runs whenever its rendered, yet this `useState()` function as part of this feature manages to maintain persistence with a state initialized the first time its run and is updated as you use one of its return values - something that happens with every subsequent render.

Additionally, order of execution for these hooks is important as it is what is used by React to keep track of them. This means you have special requirements for how they’re used (explained in later parts of the link).

…

I find them … interesting, but a little disturbing at the same time. This is starting to get into the realm of “too much magic”.

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [October 30, 2018, 5:54pm UTC](https://forum.kirupa.com/t/react-hooks/638854/2 "2018-10-30T17:54:05Z")

</div>

I’m still not a huge fan of hooks (mostly because it moves from language into API), but this is an interesting if not compelling visualization:

[https://video.twimg.com/tweet\_video/DqsCilOU0AAoS7P.mp4](https://video.twimg.com/tweet_video/DqsCilOU0AAoS7P.mp4)

via: [https://twitter.com/prchdk/status/1056960391543062528](https://twitter.com/prchdk/status/1056960391543062528)

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [October 30, 2018, 6:56pm UTC](https://forum.kirupa.com/t/react-hooks/638854/3 "2018-10-30T18:56:22Z")

</div>

That **_is_** a lot of code savings! 😛

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [November 5, 2018, 5:31pm UTC](https://forum.kirupa.com/t/react-hooks/638854/4 "2018-11-05T17:31:19Z")

</div>

A bunch of links with more information and opinions

> **[Everything about React Hooks: fundamentals, first experiences and opinions](https://www.getrevue.co/profile/Andres-from-Jexia/issues/everything-about-react-hooks-fundamentals-first-experiences-and-opinions-141957)**
>
> Andrés currently applies his knowledge to build developer platform Jexia. You can check previous newsletter editions here.

---

<div class="post-metadata">

**Author:** ![glassbeads](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/glassbeads/32/9342_2.png) [@glassbeads](https://forum.kirupa.com/u/glassbeads)\
**Post date:** [November 5, 2018, 8:03pm UTC](https://forum.kirupa.com/t/react-hooks/638854/5 "2018-11-05T20:03:13Z")

</div>

annnnddd…some more examples -\>

[https://daveceddia.com/archives/](https://daveceddia.com/archives/)

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [November 5, 2018, 8:25pm UTC](https://forum.kirupa.com/t/react-hooks/638854/6 "2018-11-05T20:25:25Z")

</div>

Also tracking for redux:

> <https://github.com/reduxjs/react-redux/issues/1063>

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [January 24, 2019, 2:20pm UTC](https://forum.kirupa.com/t/react-hooks/638854/7 "2019-01-24T14:20:56Z")

</div>

Hooks have just been enabled in react’s master branch. Shouldn’t be long now for an official release.

> <https://github.com/facebook/react/pull/14679>

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [January 24, 2019, 11:01pm UTC](https://forum.kirupa.com/t/react-hooks/638854/8 "2019-01-24T23:01:13Z")

</div>

Plays jaws theme music.

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [January 30, 2019, 3:55pm UTC](https://forum.kirupa.com/t/react-hooks/638854/9 "2019-01-30T15:55:24Z")

</div>

Looking like a Feb 4 release

> <https://github.com/facebook/react/pull/14692>