[React] 親から渡すのか、子に書けばいいのか、どっちなんだい

悩んでる

React で使いまわしたい関数がありました。こんなのです。

const getRelativeTimeString = (date) => {
        const targeDate = date instanceof Date ? date : new Date(date);

        // 現在時刻との差分をミリ秒で計算
        const now = new Date();
        const diff = now.getTime() - targeDate.getTime();

        // 秒、分、時間、日、月、年を計算
        const seconds = Math.floor(diff / 1000);
        const minutes = Math.floor(seconds / 60);
        const hours = Math.floor(minutes / 60);
        const days = Math.floor(hours / 24);
        const weeks = Math.floor(days / 7);
        const months = Math.floor(days / 30);
        const years = Math.floor(days / 365);

        if (seconds < 60) {
            return `${seconds}秒前`;
        } else if (minutes < 60) {
            return `${minutes}分前`;
        } else if (hours < 24) {
            return `${hours}時間前`;
        } else if (days < 7) {
            return `${days}日前`;
        } else if (weeks < 4) {
            return `${weeks}週間前`;
        } else if (months < 12) {
            // 月数が0の場合は日数を表示
            return months === 0 ? `${days}日前` : `${months}か月前`;
        } else {
            return `${years}年前`;
        }
    };

子コンポーネントで使いたい

上記の関数は、タイムスタンプの値をYouTubeなどでよくみかける「〇年前」とか「〇時間前」に変換するものです。今回、わたしはこれを実際には子コンポーネントの方で使いたかった。もっというと、子コンポーネントの子コンポーネント、つまり親目線で言うところの孫コンポーネントでも使わなきゃならなかった。

とりあえず現状としては、親コンポーネントに上記の関数を書いて、props で複数の子コンポーネントに渡してしまいました。

これでいいのか？

React って「これってあってるの？」みたいな、正解がよくわからない、だけど間違っているとも思えないことで、小一時間悩むことありませんか？　私はあります。

とはいえ、今回の場合でいえば、子コンポーネントごとに関数を記述するのはちょっと・・・と感じたので、これでいいのだ。

zenn の記事、初めて書いたけど、これでいいのか？