How to make OnLoad Event work for React Widget?

Question

I'm trying to call function once after component created with react.. I'm new in to this, so hope you can help me to understand. I tryied to put onLoad event in component creation, but it doesn't work. I tried to just put function call, but it's being called in the circle, but i need it to be called once - when component will finish to load.

Below is the function i got to create component and i want function 'handleClick' also to be called when component will be loaded.

function BadgeSample(props) {
    const {
      type,
      defaultValue,
      className,
      style,
      value,
      bootstrapStyle,
      clickable,
      onClickAction,
      getRef
    } = props;
    const [disabled, setDisabled] = React.useState(false);
    const [pasuedd, setPasued] = React.useState(false);
    const [highlightSection, setHighlightSection] = React.useState({
      from: 0,
      to: 0
    });
    const synth = window.speechSynthesis;
    let utterance;
    const handleClick = () => {
      if (!synth) {
        console.error("no tts");
        return;
      }
      utterance = new SpeechSynthesisUtterance(value || defaultValue);
      utterance.addEventListener("start", () => setDisabled(true));
      utterance.addEventListener("end", () => setDisabled(false));
      utterance.addEventListener("boundary", ({
        charIndex,
        charLength
      }) => {
        setHighlightSection({
          from: charIndex,
          to: charIndex + charLength
        });
      });
      synth.speak(utterance);
    };
    const stoped = () => {
      synth.cancel(utterance);
    };
    const pasued = () => {
      setPasued(true);
      synth.pause(utterance);
    };
    const resumed = () => {
      setPasued(false);
      synth.resume(utterance);
    };

//handleClick(); - here it will work, but it will repeat itself in the loop and never stopped

    return React.createElement("div", {
      className: "App",
      onClick: onClickAction,
      onLoad: handleClick, // - here it doesn't work..
      ref: getRef,
      style: style
    }, React.createElement(HighlightedText, _extends$sj({
      text: value || defaultValue
    }, highlightSection)), React.createElement("button", {
      className: disabled ? "stopbtn" : "playbtn",
      onClick: disabled ? stoped : handleClick
    }, disabled ? React.createElement("div", null, React.createElement(StopCircleFill, null), "Stop") : React.createElement("div", null, React.createElement(PlayCircleFill, null), "Listen")), disabled ? React.createElement("button", {
      className: pasuedd ? "playbtn" : "pausebtn",
      onClick: pasuedd ? resumed : pasued
    }, pasuedd ? React.createElement("div", null, React.createElement(PlayCircleFill, null), "Resume") : React.createElement("div", null, React.createElement(PauseCircleFill, null), "Pause")) : "");
  }

I try to make one call of function after page with component will be loaded.. But it doesn't work.

Answer 1

you can use useEffect. its the most efficiant way that i know and it's very comfortable to use. its a function that you can decide when you call it, and you have an option to call it just once when your website renders the first time.

here's an example:

import React, { useEffect } from 'react';

const YourComponent = () => {
  useEffect(() => {
    // your function here
  }, []);

  return (
    // your component's content and so...  );
};

and if you want it to be called when one of you states changes you can do that too. I highly recommend you read about it and use it for your projects. hope it helps :)