'When to optimize renders in react with useMemo and useCallback

I've read a few articles on when to optimize rendering in React, however, I still have some doubts.

const RepairNoticeContainer = () => {
    const dispatch = useDispatch();
    const history = useHistory();
    const { siteType, siteId } = useParams();

    const data = useSelector(pageSelectors.getData);

    const showRepairNotice = data.grid.cols.lg !== 36;

    const handleRepairClick = () => {
        dispatch(
            pagesActions.copyAndRepairCurrentPage(newPageId => {
                history.push(`/editor/${siteType}/${siteId}/pages/${newPageId}`);
            })
        );
    };

    return showRepairNotice ? <RepairNotice onRepairClick={handleRepairClick} /> : null;
};

As far as I can understand, it would be beneficial to use useCallbackfor handleRepairClick to avoid rerenders of <RepairNotice/>. But what about showRepairNoticevariable? Should it be wrapped in a useMemo for optimization?

const RepairNotice = ({ onRepairClick }) => {
    const translate = useTranslator();

    let message = translate("repair_warning");
    message = message.charAt(0).toLowerCase() + message.slice(1);

    return (
        <MessageBox type="warning" icon="information11" className="mb-0 mt-2">
            <div className="row">
                <div className="col">
                    <b>{translate("warning")}:</b> {message}
                </div>
                <div className="col-auto text-right">
                    <Button color="danger" onClick={onRepairClick} size="small">
                        {translate("repair_now")}
                    </Button>
                </div>
            </div>
        </MessageBox>
    );

A simillar question for this example. Would it be beneficial to wrap message inside of useMemo?

const Page = ({ status }) => {
    const unsavedData = status?.unsavedData ? true : false;

    return (
        <Fade>
            <div className="Page">
                <NavConfirmModal active={unsavedData} onSavePage={onSavePage} />
            </div>
        </Fade>
    );
};

Lastly, should useMemo be used unsavedData?

Explanations would be much appreciated.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source