Docs/iAPI: Fix wrong code snippet in data-wp-run example

[luisherranz]

What?

Fix a wrong code snippet in the data-wp-run example.

Discovered by @fabiankaegy and reported in Slack: https://wordpress.slack.com/archives/C071CRKGKUP/p1719289120450429

Why?

The data-wp-run callbacks run in the body of the Preact component, and ref is basically a useRef hook, which means that ref is null on the first render.

All this means that, in contrary to how it works in data-wp-watch and data-wp-init, which are basically fancy versions of useEffect, you need to access ref inside a useEffect-like hook (useEffect, useInit, useWatch…) when you use data-wp-run, exactly like you would use it in (P)React:

const Comp = () => {
  const ref = useRef();
  console.log(ref.current); // null on first render
  useEffect(() => {
    console.log(ref.current); // it's fine here
  });
  return <div ref={ref}>...</div>;
};

How?

In this specific example, I moved the getElement() call to the useEffect hook of the useInView hook, so ref is not null anymore.

[luisherranz]

I'm going to add a paragraph to explain how ref works within data-wp-run as well.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: luisherranz <[email protected]>
Co-authored-by: fabiankaegy <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[fabiankaegy]

Thanks for the updates here :)