initialize-state-hook.js

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

const readStyle = { backgroundColor: "grey" };
const unreadStyle = { backgroundColor: "white" };

const useReadStatusUpdater = (hasRead, onReset) => {
  const [read, setRead] = useState(hasRead || false);

  const resetRead = useCallback(() => {
    setRead(hasRead);
    // Handle side effects during a reset!
    if (onReset) {
      onReset(hasRead);
    }
  }, [hasRead]);

  return {
    read,
    setAsRead: () => setRead(true),
    resetReadStatus: resetRead
  };
};

const EmailsListItem = ({ hasRead, onReadStatusChange }) => {
  const { read, setAsRead, resetReadStatus } = useReadStatusUpdater(
    hasRead,
    onReadStatusChange
  );

  const style = read ? readStyle : unreadStyle;

  return (
    <div style={style}>
      <div>Subject: Email one, Content: Hello</div>
      <button
        onClick={() => {
          /* Renders email content */
          setAsRead(true);
        }}
      >
        Open
      </button>
      <button onClick={resetReadStatus}>Reset read</button>
    </div>
  );
};

export default EmailsListItem;

/**
 * Usage:
 * <EmailsListItem onReadStatusChange={() => {}} />
 */