Keeping Focus in Place with Load-More Buttons

[AleksandrHovhannisyan]

No description provided.

[EllyLoel]

Awesome post! Thanks for sharing 😄

[jkettmann]

Great blog post. Helped a lot. Only one suggestion: You can simplify the code a bit by using a ref callback. That way you don't need the useEffect either 😄

const ResultGrid = (props) => {
  const onMount = (ref) => {
    if (ref) {
      ref.focus();
    }
  }

  return (
    <>
      <ol>
        {props.results.map((result, i) => {
          const isFirstNewResult = i === props.firstNewResultIndex;
          return (
            <li key={i} id={`result-${i}`}>
              <a
                ref={isFirstNewResult ? onMount : undefined}

[AleksandrHovhannisyan]

@jkettmann Clever, thanks for sharing! I'll see if I can get around to updating the article with that approach.