Q:

How do I convert a component with a constructor function and props, to a functional component using hooks and props

I'm trying to optimize images on my web app on the go. I'm trying to modify code that works as a class function with a constructor, into a functional component that uses hooks.
The reason I need it to be a functional component is that I need props to be passed. I need it to be reusable. I need to do this: If I can do this in the code with the constructor, please please let me know or point me somewhere, that's a viable option.
I need to be reusable so that I can use it on all my img elements, in this respect:
<img src={props.image} />
I've only been able to achieve this with a functional component. This is why I'm trying to make this into a functional component. To achieve a specific problem I am unable to do because of that constructor function.
This is the working Constructor code:
import React from "react";
import ReactDOM from "react-dom";

import TestImage from "./test-image.png";

export default class ImgOptimise extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      width: 0
    };
    this.imgRef = React.createRef();
  }

  componentDidMount() {
    const width = this.imgRef.current.clientWidth;
    this.setState({
      width
    });
  }

  render() {
    // Destructure props and state
    const { src, alt, options = {}, ext = "jpg" } = this.props;
    const { width } = this.state;

    // Create an empty query string
    let queryString = "";

    // If width is specified, otherwise use auto-detected width
    options["w"] = options["w"] || width;

    // Loop through option object and build queryString
    Object.keys(options).map((option, i) => {
      return (queryString += `${i < 1 ? "?" : "&"}${option}=${
        options[option]
      }`);
    });

    return (
      <figure ref={this.imgRef}>
        {// If the container width has been set, display the image else null
        width > 0 ? (
          <>
            <img src={TestImage} alt="test" />
          </>
        ) : null}
      </figure>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<ImgOptimise />, rootElement);

This is my code for translating it to a functional component using hooks
https://codesandbox.io/live/Wr7V4
Full Code below:
import React, { useState, useEffect } from "react";
import TestImage from "./test-image.png";

const ImgOptimise = props => {
  // Destructure props and state
  const { src, alt, options = {}, ext = "jpg" } = useEffect(0);
  const [width] = useState(0);

  const imgRef = React.createRef();
  useEffect(() => {
    const width = imgRef.current.clientWidth;
  }, []);

  // Create an empty query string
  let queryString = "";
  // If width is specified, otherwise use auto-detected width
  options["w"] = options["w"] || width;
  // Loop through option object and build queryString
  Object.keys(options).map((option, i) => {
    return (queryString += `${i < 1 ? "?" : "&"}${option}=${options[option]}`);
  });
  return (
    // If the container width has been set, display the image else null
    <figure ref={imgRef}>
      {// If the container width has been set, display the image else null
      width > 0 ? (
        <>
          <img src={TestImage} />
        </>
      ) : null}
    </figure>
  );
};
export default ImgOptimise;

const rootElement = document.getElementById("root");
ReactDOM.render(<ImgOptimise />, rootElement);

ERROR: TypeError: Cannot destructure property 'src' of 'Object(...)(...)' as it is undefined.
something to do with this, I'm not sure how to destructure it properly:
//Constructor
const { src, alt, options = {}, ext = "jpg" } = this.props;
 
//Hooks
const { src, alt, options = {}, ext = "jpg" } = useEffect(0);
 
I'm also not sure if I translated this properly
    this.imgRef = React.createRef();
  }

  componentDidMount() {
    const width = this.imgRef.current.clientWidth;
    this.setState({
      width
    });
  }

to this:
 const [width] = useState(0);
  // const [nameState , setNameState] = useState(props);
  const imgRef = React.createRef();
  useEffect(() => {
    const width = imgRef.current.clientWidth;
  }, []);

Any Help changing this from a class component to a functional component will be greatly appreciated.
UPDATE
Turns out mine was a rookie mistake. I overlooked this
Even though my problem has been solved, I will leave the question open as it will be interesting to see this turned into a functional component, because, well, why not?  

A:

If these are your props, you just need to destructure them, not apply useEffect().
const { src, alt, options = {}, ext = "jpg" } = props;

For your state, you need to define a function along with your state variable.
const [width, setWidth] = useState(0);

Then call that function to update width.
setWidth(imgRef.current.clientWidth);

More info can be found by searching, e.g. https://duckduckgo.com/?q=how+to+convert+react+component+to+hooks&ia=web , which results in some good articles like https://alligator.io/react/converting-to-a-hook/

