Bviveksingh

useEffect(() => {
   if(!startTimer && inpBoxSplit.length > 0){
       computeResult();
    }
},[startTimer, inpBoxSplit])

Bviveksingh

useEffect(() => {
  if(timeInSeconds && paragraphArr.length > 0){
      setEligibleToStart(true);
  }
},[timeInSeconds,paragraphArr]);

Bviveksingh

useEffect(() => {
 if(inputVal && !endTimer){
    setStartTimer(true);
 }
},[inputVal]);

Bviveksingh

const compare = () => {
   if(inpBoxSplit[inpBoxSplit.length - 1] !== splitToArr[inpBoxSplit.length - 1]){
      const copyArr = paragraphArr.slice();
      copyArr[inpBoxSplit.length - 1] = <CreateSpanElements value={splitToArr[inpBoxSplit.length - 1]} index={inpBoxSplit.length-1} nameClass={-1} />;
      setIncorrectEntry(prevState => ++prevState);
      setParagraphArr(copyArr);
   }
   else{
      const copyArr = paragraphArr.slice();
      copyArr[inpBoxSplit.length - 1] = <CreateSpanElements value={splitToArr[inpBoxSplit.length - 1]} index={inpBoxSplit.length-1} nameClass={1} />;

Bviveksingh

useEffect(() => {
   compare();
}, [inpBoxSplit]);

Bviveksingh

const [inpBoxSplit, setInpBoxSplit] = useState<string[]>([]);

Bviveksingh

useEffect(() => {
  if(inputVal){
     const x =  inputVal.split('');
     setInpBoxSplit(x);
  }
},[inputVal]);

Bviveksingh

useEffect(() => {
   setParagraphArr(splitToArr.map((val,index) => <CreateSpanElements value={val} index={index} nameClass={0}/>));
},[splitToArr]);

Bviveksingh

const [splitToArr, setSplitToArr] = useState<string[]>([]);

Bviveksingh

useEffect(() => {
   if(displayVal){
       setSplitToArr(displayVal.split(''));
   }
}, [displayVal]);