
Remember [Gauge Generator](https://veerasundar.com/gauge-generator/) app? I initially [wrote it](https://veerasundar.com/blog/building-a-radial-gauge-with-svg-and-react-part-2/) using React classes and then [optimized it's performance](https://veerasundar.com/blog/optimizing-performance-of-an-react-app/) using React PureComponent.

Now let's see how it can be rewritten using the talk-of-the-react-town - [Hooks](https://reactjs.org/docs/hooks-intro.html).

## What the hook?

![Use React Hook](https://i.imgur.com/NXf394H.png)

Put it simply, **Hooks** lets you to use state and other react features in your function components. For example, if you need state, you can use [useState](https://reactjs.org/docs/hooks-state.html) hook. And, if you need context, you can use [useContext](https://reactjs.org/docs/hooks-reference.html#usecontext).

Apart from the [built-in hooks](https://reactjs.org/docs/hooks-reference.html), you can create your own custom hooks and share the functionality across your React components (remember mixins, but a LOT better than that).

You can get an [overview of React hooks](https://reactjs.org/docs/hooks-intro.html) or if you are really interested, do a [deep dive](https://overreacted.io/a-complete-guide-to-useeffect/) in Dan's blog.

Let's get on to our business - convert a React class component that uses State to a function component using Hooks.

## React class component with State

The component that I am going to use is the [`InputColor`](https://github.com/vraa/gauge-generator/blob/master/src/components/input-color.js) of [Gauge Generator app](https://veerasundar.com/gauge-generator/). This component wraps the `SketchPicker` color picker tool and let the user to select a color from the pop-up. It has one state variable - `pickerOpen` to indicate if the pop-up is opened or not.

For brevity, I omitted some code of this class.

```javascript
import React, { PureComponent } from "react"

class InputColor extends PureComponent {
  state = {
    pickerOpen: false
  }

  togglePicker = () => {
    this.setState(state => ({ pickerOpen: !state.pickerOpen }));
  }

  render() {
    const { pickerOpen } = this.state;
    return (
      <div>
        Picker State: {pickerOpen ? "Open" : "Closed"}
        <button onClick={this.togglePicker}>Toggle</button>
      </div>
    );
  }
}
```

Here we have a simple React component, written as a Class and holds a State variable. To convert this into a functional component with hooks, lets determine the state we need to track. In our case, we need to track a single `pickerOpen` boolean value in state. We can use `useState` hook for this purpose.

## useState hook

`useState` function takes in an initial value of the state and returns two values: `[currentStateValue, callbackToSetStateValue]`

So, in our case, we can convert the state and its modified method as below:

### Refactoring state

```javascript
/* Before refactor */
state = {
  pickerOpen: false
}

togglePicker = () => {
  this.setState(state => ({ pickerOpen: !state.pickerOpen }));
}

/* After refactor using useState hook */
const [pickerOpen, setPickerOpen] = useState(false);
const handlePickerButtonClick = e => {
  setPickerOpen(!pickerOpen);
}
```

If you notice, we got rid of using `this` in the refactor. Because, in functional component, you don't need to use `this` and all the functions / variables are wrapped in closures, so you can directly access them.

With this change, now whenever you update the state value using `setPickerOpen` callback, React will re-render your whole component again.

Now that we have our state built, it's time to use it in our render logic.

### Refactoring render
```javascript
const [pickerOpen, setPickerOpen] = useState(false);
const handlePickerButtonClick = e => {
  setPickerOpen(!pickerOpen);
}
return (
  <div>
    Picker State: {pickerOpen ? "Open" : "Closed"}
    <button onClick={handlePickerButtonClick}>Toggle</button>
  </div>
);
```

## Putting it all together

We have our state and render function, lets wrap it in a functional React component:

```javascript
const InputColor = () => {
  const [pickerOpen, setPickerOpen] = useState(false);
  const handlePickerButtonClick = e => {
    setPickerOpen(!pickerOpen);
  }
  return (
    <div>
      Picker State: {pickerOpen ? "Open" : "Closed"}
      <button onClick={handlePickerButtonClick}>Toggle</button>
    </div>
  );
}
```

No more classes! yay!!

## Hey, what about the performance?

React will re-render your function component when ever there's a change in the prop values. In Class component, we have `PureComponent` or `shouldComponentUpdate` to [help us with avoiding re-renders](https://veerasundar.com/blog/optimizing-performance-of-an-react-app/). `PureComponent` will do a shallow comparision and using `shouldComponentUpdate`, you can write your own comparison logic.

But, How can we do the same in the function component? `React.memo`.

Just wrap your function component with `React.memo` and you will get the functionality of `PureComponent` in here.

For example,

```javascript
const InputColor = React.memo( ({value}) => {
  /* ... other logic ...*/
    return <p>{value}</p>
});
```

With this change, React will not re-render our `InputColor` component, if the passed in `value` did not change.

## Conclusion

In this post, I touched upon the very basic of React hooks - `useState`. In the coming articles, lets dive further and refactor our [Gauge Generator](https://veerasundar.com/gauge-generator/) app using some advanced hooks concept. Hang tight!


Rewriting a React Component using Hooks and React.Memo


**TLDR;** [https://github.com/vraa/css-timeline](https://github.com/vraa/css-timeline)

Just finished updating/redesigning (or messing up) [my online resume](https://veerasundar.com/resume/). For the new design, I needed a timeline like UI component to show my work history. The componenent need not to be a perfect timeline, with actual scaling and all. But it should look like one and should respond to the screen width.

Here's a screenshot of the timeline component from my resume's work history section.

<a
  href="http://www.flickr.com/photos/94921037@N05/12284453065/"
  title="timeline by v33ra, on Flickr"
>
  <img
    src="http://farm4.staticflickr.com/3786/12284453065_87e377c0e9_c.jpg"
    width="800"
    height="557"
    alt="timeline"
  />
</a>

And, here's the responsive layout of the timeline in smaller screens.

<a
  href="http://www.flickr.com/photos/94921037@N05/12284483625/"
  title="timeline-responsive by v33ra, on Flickr"
>
  <img
    src="http://farm8.staticflickr.com/7391/12284483625_0f187a5924_c.jpg"
    width="501"
    height="800"
    alt="timeline-responsive"
  />
</a>

After implementing the design, I thought of separating the timeline code alone as a re-usable component. Hence the new github repo: [https://github.com/vraa/css-timeline](https://github.com/vraa/css-timeline).

If you have a need to use something similar in your code, feel free to fork and use. Customize the variables in timeline.less file to your taste and compile it with less.js.

Fair warning: There are few limitations with the current implementation, which I'll fix in near future. If you happened to patch any bugs, please send me a pull request. TIA.


#component (2)