fix: Important note regarding SSR for @bsmnt/drop

[Alistair Smith]

The readme specifies that rendering the time on the server is difficult, or that we should render a different time until we are on the client. React says that we can (very carefully) still render different values on the server if the child is strictly only a text node.

From the React docs (https://reactjs.org/docs/react-dom.html):

If a single element’s attribute or text content is unavoidably different between the server and the client (for example, a timestamp), you may silence the warning by adding suppressHydrationWarning={true} to the element. It only works one level deep, and is intended to be an escape hatch. Don’t overuse it. Unless it’s text content, React still won’t attempt to patch it up, so it may remain inconsistent until future updates.

Maybe it would be cool to include this in the Readme. E.g:

import { useEffect, useState } from "react";
import { useCountdownStore } from "@bsmnt/drop";

const Countdown = () => {
  const humanTimeRemaining = useCountdownStore()(
    state => state.humanTimeRemaining,
  );

  return (
    <div>
      <h1>Countdown</h1>
      <ul>
        <li suppressHydrationWarning>Days: {humanTimeRemaining.days}</li>
        <li suppressHydrationWarning>Hours: {humanTimeRemaining.hours}</li>
        <li suppressHydrationWarning>Minutes: {humanTimeRemaining.minutes}</li>
        <li suppressHydrationWarning>Seconds: {humanTimeRemaining.seconds}</li>
      </ul>
    </div>
  );
};

[Julian Benegas]

great idea. will work on suggesting this in the readme.