abha57

import React, { createRef, useEffect, useState } from "react";
import "./style.scss";

const ImageContainer = (props) => {
  ...
  const [loadedImages, setLoadedImages] = useState([]);
  ...

  useEffect(() => {
    setLoadedImages(

abha57

import React, { createRef, useEffect, useState } from "react";
import "./style.scss";

const ImageContainer = (props) => {
  const { images } = props;
  const [observer, setIntersectionObserver] = useState(null);
  const [highRefs, setHighRefs] = useState([]);
  const [thumbRefs, setThumbRefs] = useState([]);

abha57

.image-container {
  padding: 1rem;
  margin-bottom: 2rem;
  .aspect-ratio-box {
    width: 100%;
    position: relative;
    background-color: white;
    height: 0;
    padding-top: 25%; // landscape-view
  

abha57

import React, { createRef, useEffect, useState } from "react";
import "./style.scss";

const ImageContainer = (props) => {
  const { images } = props;
  return (
    <>
      {images.map((image, index) => (
          <div className="image-container">
            <div className="aspect-ratio-box" key={image.alt}>

abha57

import React from "react";
import ImageContainer from "./components/ImageContainer";
import { images } from "./images.json";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <ImageContainer images={images} />
    </div>

abha57

{
  "images": [
    {
      "id": "1",
      "thumbSrc": "https://miro.medium.com/max/60/1*0FQ5gha7qPdNHOlY34iGoQ.png?q=20",
      "highResSrc": "https://miro.medium.com/max/4320/1*0FQ5gha7qPdNHOlY34iGoQ.png",
      "alt": "image-css-tailwind-sass"
    }
  ]
}

abha57

Forward refs are used to pass refs to children or HOCs.
ref attribute is not directly accesssible in props. So React.forwaredRef provides an API to access it.

const FancyButton = React.forwardRef((props, ref) {
  // ref can be used normally.
  <button ref={ref}></button>
})

Forwarding refs to DOM components
https://reactjs.org/docs/forwarding-refs.html#forwarding-refs-to-dom-components

abha57

1 - Buttons do not have an accessible name.
For buttons without visible labels, like icon buttons, use the aria-label attribute to clearly describe the action to anyone using an assistive technology.
<button aria-label='click'>some image</button>

2 - Image elements should have [alt] attributes.

3 - Background and foreground colors do not have a sufficient contrast ratio. Low-contrast text is difficult or impossible for many users to read.

abha57

If Google can run JavaScript and thereby render client-side views, why is server-side rendering necessary for SEO?

It seems Google is not guaranteed to run your JavaScript automatically.  the browser can execute JavaScript and produce content on the fly - the crawler cannot.
You may have to manually trigger a crawl. And, even then, Google apparently won’t do any AJAX requests your page.

 - Also, make sure the AJAX requests are for the same domain.
 - CORS is not supported (makes sense from a crawler POV not to crawl external resources.)
 - John Mueller of Google stated, just last March, 2016, that Google still struggles with AJAX and does not
   handle ServiceWorker and other things at all.
   https://developers.google.com/search/docs/ajax-crawling/docs/images/overview.png

abha57

And function declaration takes precedence over variable declarations (but not over variable assignment).

variable declaration
var foo;
variable assignment
var foo = 'foo';

function declaration
function foo() {}
function assignment