Is this the proper way to use React Hooks?

JavaScript
1

I am currently working on the Drum Machine project and I am thinking of using the Volume Knob React Hooks Component 3 to control the volume. Is this the proper way to use React Hooks? Thanks for any help and have a great day!

Btw, the Drum Machine with React Hooks and Redux 21 is what I have so far for the Drum Machine project. It will eventually be similar to the Drum Machine 56 With Web Audio API, which is not finished and is different because it uses class components. Both of them use Redux, though.

2

There are two ways to create the React components, one is using the function and other is using the class , there is always a confusion between one v/s other.

Let us assume we have a simple class component and then we will convert it to a functional with hooks and see the difference.

Component without Hook: Class Component

import React, { Component } from "react";
class Greeting extends Component {
  state = {
    text: "",
  };
  handleChange = (e) => {
    this.setState({ text: e.target.value });
  };
  render() {
    return <input value={this.state.text} onChange={this.handleChange} />;
  }
}
export default Greeting;

Components with Hook:Functional Component:

import React, { useState } from "react";
export default () => {
  const [text, setText] = useState("");
  return (
    <input
      value={text}
      onChange={(e) => {
        setText(e.target.value);
      }}
    />
  );
};