How to catch the moment of forwarding data from the parent component to the child?

Question

JavaScript

It turns out that I pass data through props from the parent component (App.jsx) to the child component (Ability.jsx) through props, but first the first value of this data is transmitted, which is equal to an empty object, and only then the final state is transmitted, which I need to get an array with objects .... so, The problem is that I only need the object that has a sub-object with nesting language => name => "en"... I'm trying to find this object using the find array method... However, since an empty object comes first, I get an error saying that I can’t execute such a method on an empty object ...

What needs to be written so that not the initial data (an empty object) is captured, but the final ones (an array with objects)

import React, { useEffect } from "react";
import { NavLink } from "react-bootstrap";
import styles from "./Ability.module.css";
const Ability = ({ ability }) => {
  console.log(ability);

  let text;
  const getNeededLanguageText = () => {
    if (!Object.keys(ability).length === 0) {
      ability.find((el, index) => {
        return el.language.name === "en";
      });
    }
  };
  useEffect(() => {
    text = getNeededLanguageText();
  }, []);

  console.log(text);
  // остановился на том что приходят две языковых версии текста абилок... надо придумать как будет отображаться именно английская..
  return (
    <div>
      <div className="container">
        <div className="row">
          <div className="col-lg-12">
            {/* <p>{ability.effect}</p>
            <p>{ability.short_effect}</p> */}
          </div>
          <div className="col-lg-12">
            <NavLink to="/pokemon">Вернуться назад</NavLink>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Ability;

Answer 1

Solved the problem like this

spoiler

import React, { useEffect, useState } from "react";
import { NavLink } from "react-bootstrap";
import styles from "./Ability.module.css";
const Ability = ({ ability }) => {
  console.log(ability);

  const [state, setstate] = useState({});

  useEffect(() => {
    console.log("RENDERED");
    if (Array.isArray(ability)) {
      console.log("выполняется поиск");

      const neededText = ability.find((el, index) => {
        return el.language.name === "en";
      });
      setstate({ neededText });
    }
  }, [ability]);

  console.log(state);
  // остановился на том что приходят две языковых версии текста абилок... надо придумать как будет отображаться именно английская..
  return (
    <div>
      <div className="container">
        <div className="row">
          {state.neededText && (
            <div className="col-lg-12">
              <p>{state.neededText.effect}</p>
              <p>{state.neededText.short_effect}</p>{" "}
            </div>
          )}

          <div className="col-lg-12">
            <NavLink to="/pokemon">Вернуться назад</NavLink>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Ability;

in short, it was necessary to check for the existence of Array + put the dependency in useEffect ....