React Render Modeli

1
import { memo } from 'react';
2

3
export interface Transaction {
4
  readonly id: string;       // core banking transaction id
5
  readonly description: string;
6
  readonly amountKurus: number; // integer, negative = money out
7
  readonly channel: 'FAST' | 'EFT' | 'CARD';
8
}
9

10
// Integer maths only: 123456 becomes "1.234,56 TL".
11
export function formatTry(kurus: number): string {
12
  const abs = Math.abs(kurus);
13
  const lira = (abs - (abs % 100)) / 100;
14
  const sign = kurus < 0 ? '-' : '';
15
  return `${sign}${lira.toLocaleString('tr-TR')},${String(abs % 100).padStart(2, '0')} TL`;
16
}
17

18
interface Props {
19
  transactions: readonly Transaction[];
20
  onDispute: (transactionId: string) => void;
21
}
22

23
export const TransactionList = memo(function TransactionList({ transactions, onDispute }: Props) {
24
  return (
25
    <ul>
26
      {transactions.map((t) => (
27
        <li key={t.id}>
28
          {t.description} {formatTry(t.amountKurus)}
29
          {t.channel === 'CARD' && (
30
            <button type="button" onClick={() => onDispute(t.id)}>İtiraz et</button>
31
          )}
32
        </li>
33
      ))}
34
    </ul>
35
  );
36
});

1
import { useEffect, useState } from 'react';
2

3
// The ticking state lives here, so a tick re-renders this component only.
4
export function SessionCountdown({ expiresAt }: { expiresAt: number }) {
5
  const [now, setNow] = useState(() => Date.now());
6

7
  useEffect(() => {
8
    const id = setInterval(() => setNow(Date.now()), 1000);
9
    return () => clearInterval(id);
10
  }, []);
11

12
  const secondsLeft = Math.max(0, Math.ceil((expiresAt - now) / 1000));
13
  return <p role="timer">Oturum {secondsLeft} sn sonra kapanacak</p>;
14
}

1
import { useCallback, useMemo, useState } from 'react';
2
import { SessionCountdown } from './SessionCountdown';
3
import { TransactionList, formatTry, type Transaction } from './TransactionList';
4

5
interface Props {
6
  iban: string;
7
  balanceKurus: number;
8
  transactions: readonly Transaction[];
9
  sessionExpiresAt: number;
10
  openDispute: (iban: string, transactionId: string) => void; // stable, from the parent
11
}
12

13
export function AccountScreen({ iban, balanceKurus, transactions, sessionExpiresAt, openDispute }: Props) {
14
  const [onlyOutgoing, setOnlyOutgoing] = useState(false);
15
  const [balanceHidden, setBalanceHidden] = useState(false);
16

17
  // Same references until their inputs really change, so memo can skip the list.
18
  const visible = useMemo(
19
    () => transactions.filter((t) => !onlyOutgoing || t.amountKurus < 0),
20
    [transactions, onlyOutgoing],
21
  );
22
  const onDispute = useCallback((id: string) => openDispute(iban, id), [iban, openDispute]);
23

24
  return (
25
    <section>
26
      <p>{balanceHidden ? '•••••' : formatTry(balanceKurus)}</p>
27
      <button type="button" onClick={() => setBalanceHidden((h) => !h)}>Bakiyeyi gizle/göster</button>
28
      <button type="button" onClick={() => setOnlyOutgoing((o) => !o)}>Yalnızca giden</button>
29
      <SessionCountdown expiresAt={sessionExpiresAt} />
30
      <TransactionList transactions={visible} onDispute={onDispute} />
31
    </section>
32
  );
33
}

1
import { useEffect, useState } from 'react';
2
import { TransactionList, type Transaction } from './TransactionList';
3

4
interface Props {
5
  iban: string;
6
  transactions: readonly Transaction[];
7
  sessionExpiresAt: number;
8
  openDispute: (iban: string, transactionId: string) => void;
9
}
10

11
// Another way to write it. The list is still wrapped in memo, yet it re-renders every second.
12
export function AccountScreen({ iban, transactions, sessionExpiresAt, openDispute }: Props) {
13
  const [onlyOutgoing, setOnlyOutgoing] = useState(false);
14
  const [now, setNow] = useState(() => Date.now());
15

16
  useEffect(() => {
17
    const id = setInterval(() => setNow(Date.now()), 1000); // the whole screen ticks
18
    return () => clearInterval(id);
19
  }, []);
20

21
  // A new array and a new function on every tick: memo's comparison never matches.
22
  const visible = transactions.filter((t) => !onlyOutgoing || t.amountKurus < 0);
23
  const onDispute = (id: string) => openDispute(iban, id);
24

25
  return (
26
    <section>
27
      <p role="timer">{Math.max(0, Math.ceil((sessionExpiresAt - now) / 1000))} sn</p>
28
      <button type="button" onClick={() => setOnlyOutgoing((o) => !o)}>Yalnızca giden</button>
29
      <TransactionList transactions={visible} onDispute={onDispute} />
30
    </section>
31
  );
32
}