initialize-state-side-effects.js

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

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

const EmailsListItem = ({ hasRead, onReadStatusChange }) => {
  const [read, setRead] = useState(hasRead || false);
  const resetRead = useCallback(() => {
    setRead(hasRead);
    // Handle side effects during a reset!
    if (onReadStatusChange) {
      onReadStatusChange(hasRead);
    }
  }, [hasRead]);

  const style = read ? readStyle : unreadStyle;

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

export default EmailsListItem;