Changing from "class" to "React Hooks"

Question

My code right now picks a date, and this class is used in another file. Where it renders the date in a ddd D MMMM format. I want to change my code from a class to a react hook, and I'm not very sure how to do this. Here is the code:

import React, { Component } from "react";
import moment from "moment";
 
class DayPicker extends Component {
  constructor(props) {
    super(props);
    this.state = { date: Date() };
  }

  componentDidMount() {
    this.timerID = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: Date(),
    });
  }

  render() {
    return (
      <div className={style.dayPicker}>
        {moment()
          .add(daysToAdd ? daysToAdd : 0, "day")
          .format("ddd D MMMM")}
      </div>
    );
  }
}

export default DayPicker;

If someone manages to convert my code into react hooks, please explain the process to me as it would be a great change to learn more about react Hooks.

I have managed to figure it out

Newton Yuan
– Newton Yuan

2023-06-29 22:34:37 +00:00
Commented Jun 29, 2023 at 22:34 — Newton Yuan
– Newton Yuan, Commented Jun 29, 2023 at 22:34

Rich Churcher · Accepted Answer · 2019-06-28 06:43:49Z

2

You need to keep in mind the following things which converting the classes to functional components with hooks.

First: use useState hook in place of state.

Second: change lifecycle methods to useEffect hooks.

Third: Change classes variables to useRef.

import React, { useState, useEffect } from "react";
import moment from "moment";

const DayPicker = ()=> {
  const [date, setDate] = useState(new Date());

  const timerID = useRef(null);
  useEffect(() => {
     timerID.current = setInterval(() => tick(), 1000);

     return () => {
        // This function will execute on unmount
        clearInterval(timerID.current);
     }
  }, []) // empty array here signifies that the effect will be run once on initial mount


  const tick = () => {
    setDate(new Date())
  }

    return (
      <div className={style.dayPicker}>
        {moment()
          .add(daysToAdd ? daysToAdd : 0, "day")
          .format("ddd D MMMM")}
      </div>
    );
}

export default DayPicker;

For a detailed understanding of each of these hooks, read the React docs.

edited Jun 28, 2019 at 6:43

Rich Churcher

7,6923 gold badges40 silver badges61 bronze badges

answered Jun 28, 2019 at 5:02

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Brad Ball Over a year ago

in this you could also take out the function tick() and just call setDate(new Date()) by itself in setInterval

Shubham Khatri Over a year ago

@BradBall, yes we could do that as well, but I didn't want to confuse the OP

Collectives™ on Stack Overflow

Changing from "class" to "React Hooks"

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related