Top React Hooks — Placeholder and Titles

Hooks contains our logic code in our React app.

We can create our own hooks and use hooks provided by other people.

In this article, we’ll look at some useful React hooks.

react-optimistic-ui-hook

The react-optimistic-ui-hook library lets us create a UI that doesn’t wait for an operation to finish to update the final state.

They immediately switch to the final state and show fake data while the read ones are loading.

We can install it by running:

npm install react-optimistic-ui-hook

or:

yarn add react-optimistic-ui-hook

Then we can use it by writing:

import React from "react";
import { useOptimisticUI } from "react-optimistic-ui-hook";

const USERNAME = "facebook";
const PREDICTED_AVATAR_URL = "http://placekitten.com/200/200";
const DELAY_IN_MS = 2000;

async function getGithubAvatarURL(username) {
  const response = await fetch(`https://api.github.com/users/${username}`);
  const data = await response.json();

  return new Promise(resolve => {
    setTimeout(() => {
      resolve(data.avatar_url);
    }, DELAY_IN_MS);
  });
}

export default function App() {
  const { status, result, error } = useOptimisticUI(
    () => getGithubAvatarURL(USERNAME),
    PREDICTED_AVATAR_URL
  );

  return (
    <div>
      <img src={result} alt="avatar" />
      <p>Status: {status}</p>
      <p>Error: {JSON.stringify(error)}</p>
    </div>
  );
}

We have the getGithubAvatarURL function that gets the avatar of the Github user asynchronously.

Then we can use that with the useOptimisticUI hook to run the promise.

The first argument has the callback that gets the data.

The 2nd is the URL for the placeholder to show when the real data is being downloaded.

The hook returns the status which is the loading status of the image.

result is the result, which is the resolved value of the promise returned from getGithubAvatarURL .

error has any errors that occurred.

React Page Name

React Page Name is a library that lets us update the page title in our React app.

To install it, we run:

npm install react-page-name

Then we can use it by writing:

import React from "react";
import { usePageName } from "react-page-name";

export default function App() {
  usePageName("hello world");

  return <div>hello world</div>;
}

The usePageName hook takes the string with the page title as an argument.

It also comes with a higher-order component.

For instance, we can write:

import React from "react";
import { withPageName } from "react-page-name";

let Page = () => {
  return <div>hello world</div>;
};

Page = withPageName("hello world")(Page);

export default function App() {
  return (
    <div>
      <Page />
    </div>
  );
}

We created the Page component and used the withPageName higher-order component to set the page title.

The higher-order component will also make the setPageName method available to our component, so we can write:

import React from "react";
import { withPageName } from "react-page-name";

let Page = ({ setPageName }) => {
  setPageName("hello world");

  return <div>hello world</div>;
};

Page = withPageName()(Page);

export default function App() {
  return (
    <div>
      <Page />
    </div>
  );
}

Conclusion

react-optimistic-ui-hook lets us show a placeholder until the real data is loaded.

React Page Name lets us change the page title with a hook or higher-order component.