Let's get straight to the point, No boring introduction this time.

Before you can perform this stunt, You need to have a basic idea on a couple of concepts.

1. forwarRef

In React, every native JSX element accepts a ref prop which returns that particular element after it is rendered. By native, I mean standard HTML element. This element(object) is usually stored in a ref object that is initialized using the useRef hook. It will look something like this

const App = () => {
    const buttonRef = useRef<HTMLButtonElement>(null);
    return <button ref={buttonRef}>Click Me</button>
}

This is for native HTML elements. For custom React components, you will have to define the ref prop. forwardRef is what React provides for this purpose. Using forwardRef you can pass a ref through a component to one of its children.

const CustomButton = forwardRef<HTMLButtonElement>((_props, ref) => {
  return <button ref={ref}>Click me</button>;
});

const App = () => {
  const buttonRef = useRef<HTMLButtonElement>(null);
  return <CustomButton ref={buttonRef} />
}

Notice how we have passed the button element inside CustomButton onto the parent App component. Now, what if we wanted to pass some other value instead of the element itself? React provides a hook for this purpose.

2. useImparativeHandle

React makes it possible to pass a value from child to parent through ref using the useImparativeHandle hook. Note that even React suggests not to use this pattern as the data flow is supposed to be unidirectional (Top to Bottom/Parent to Child).

const Parent = () => {
  const childRef = useRef<{ value: string }>(null);

 useEffect(() => console.log(childRef.current?.value), [childRef]);
// I am from child

  return <Child ref={childRef} />;
};

const Child = forwardRef<{ value: string }>((_props, ref) => {
  useImperativeHandle(ref, () => ({ value: "I am from child" }));
  return <></>;
});

And this is all we need! Let's create that typical counter app used in every React blog ever, but this time the buttons will be on the parent component.

// Counter.tsx
import { forwardRef, useState, useImperativeHandle } from "react";

export interface ICounter {
  setCount: React.Dispatch<SetStateAction<number>>;
}

export const Counter = forwardRef<ICounter | null>((_props, ref) => {
  const [count, setCount] = useState(0);

  useImperativeHandle(ref, () => ({
    setCount
  }));

  return <span>{count}</span>;
});

// App.tsx
import { useRef } from "react";
import { Counter, ICounter } from "./Counter.tsx";

export const App = () => {
  const counterRef = useRef<ICounter | null>(null);

  const handleCounterChange = (step: number) =>
    counterRef.current?.setCount((count) => count + step);

  return (
      <div>
        <button onClick={() => handleCounterChange(-1)}>-</button>
        <Counter ref={counterRef} />
        <button onClick={() => handleCounterChange(1)}>+</button>
      </div>
  );
};

Code Explaination

• The Counter component has a count state which is displayed on the same.
• The setCount function is forwarded onto the App component using the useImperativeHandle hook.
• useImperativeHandle takes in the ref object and a callback function that returns an object that will be stored in the current property of the ref object.
• setCount is now accessible on App and it can be used to update the count state.

There you go, The count state in the Counter component will now be updated from the App component. Live demo

Prerequisites

• HTML
• CSS
• JavaScript
• React

Setting Up

Use npx create-react-app to create a boilerplate and clear the unwanted files and contents. We will be creating an app that displays a list of posts from https://jsonplaceholder.typicode.com/posts API.

Note that few general conventions are intentionally avoided to keep it as simple as possible.

Card

Create Card.js file inside the src folder. This component will be used to display the post details.

import React from "react";

export default function Card() {
  return (
    <div className="card">
      <h2>title goes here</h2>
      <p>body goes here</p>
    </div>
  );
}

Skeleton

Create Skeleton.js file inside the src folder :

import React from "react";

export default function Skeleton() {
  return (
    <div className="card skeleton">
      <div className="title text"></div>
      <div className="description text"></div>
      <div className="description text"></div>
      <div className="description text"></div>
      <div className="overlay"></div>
    </div>
  );
}

Styling

Let's add few stylings to the components :

* {
  box-sizing: border-box;
}
body {
  background-color: #f8f9fa;
  display: flex;
  flex-direction: column;
  align-items: center;
}
h1 {
  text-align: center;
}
.card {
  width: 450px;
  margin: 30px;
  padding: 20px;
  min-height: 200px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.3);
}
h2, p, .title, .description {
  margin: 15px;
}
.text {
  border-radius: 8px;
  background-color: #dee2e6;
}
.title {
  width: 200px;
  height: 20px;
}
.description {
  width: 350px;
  height: 15px;
}

Animation

The Skeleton Screen is only complete with a linear animation, so let's add a few more properties :

.skeleton {
  position: relative;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 20%;
  height: 100%;
  background-color: rgba(256, 256, 256, 0.3);
  box-shadow: 0px 0px 20px 30px rgba(256, 256, 256, 0.2);
  animation: slider 1.2s infinite;
}
@keyframes slider {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(500%);
  }
}

App

Now we are all set with the components. Let's import them in App.js:

import "./styles.css";
import Card from "./Card";
import Skeleton from "./Skeleton";

Let's build Logic to fetch the posts. For this we will need useState and useEffect hooks. So let's import them :

import React, { useState, useEffect } from "react";

We will need a state to store the posts. So initialize an empty array:

const [posts, setPosts] = useState([]);

Also , initialize a boolean state to keep a track on the posts array :

const [isEmpty, setIsEmpty] = useState(true);

The isEmpty variable is set to true initially since the posts array is empty.

Now lets fetch the posts :

 useEffect(() => {
    setTimeout(() => {
      fetch("https://jsonplaceholder.typicode.com/posts")
        .then((response) => response.json())
        .then((data) => {
          setPosts(data);
          setIsEmpty(false);
        })
        .catch((err) => console.log(err));
    }, 3000);
 }, []);

A 3 seconds delay is added to mimic a slow server resonse. The isEmpty variable is updated to false when posts array is populated with data. The useEffect hook is provided with an empty dependency array which corresponds to the componentDidMount life cycle method.

The final part, Let's render the components :

return (
    <>
      <h1>Posts</h1>
      {
        isEmpty && [1, 2, 3, 4].map((value) => <Skeleton key={value} />)
      }
      {
        isEmpty ||
          posts.map((post) => (
            <Card key={post.id} title={post.title} body={post.body} />
          ))
      }
    </>
  );

We render 4 Skeleton Cards if isEmpty is true. Else, we render the posts.

The App.js will look like :

import "./styles.css";
import React, { useState, useEffect } from "react";
import Card from "./Card";
import Skeleton from "./Skeleton";

export default function App() {
  //state to store posts
  //initializing posts as an empty array
  const [posts, setPosts] = useState([]);
  //state to determine whether posts is empty
  const [isEmpty, setIsEmpty] = useState(true);

  useEffect(() => {
    //3s timeout to mimic server delay
    setTimeout(() => {
      fetch("https://jsonplaceholder.typicode.com/posts")
        .then((response) => response.json())
        .then((data) => {
          //populating posts array
          setPosts(data);
          setIsEmpty(false);
        })
        .catch((err) => console.log(err));
    }, 3000);
  }, []);

  return (
    <>
      <h1>Posts</h1>
      {
        // rendering 4 skeleton cards when posts array is empty
        isEmpty && [1, 2, 3, 4].map((value) => <Skeleton key={value} />)
      }
      {
        //rendering actual cards when posts array is populated with some data
        isEmpty ||
          posts.map((post) => (
            <Card key={post.id} title={post.title} body={post.body} />
          ))
      }
    </>
  );
}

A final touch left. Notice that we are passsing props to the Card Component? It has to be taken care of. Make the following changes in Card.js.

import React from "react";

export default function Card({ title, body }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <p>{body}</p>
    </div>
  );
}

We destructured the props and used them appropriately.

And Thats it !!

Final Output