# All files / src/chap07 HookDeferredTransition.js

0% Statements 0/11
100% Branches 0/0
0% Functions 0/4
0% Lines 0/10

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31

     import { useDeferredValue, useState } from 'react';
    import books from './books';
    import commentList from './comments';
    import { BookDetails, CommentList } from './HookTransitionChild';

    export default function HookDeferredTransition() {
      const [isbn, setIsbn] = useState('');
      const [comments, setComments] = useState([]);
      const deferredComments = useDeferredValue(comments);
      const isPending = comments !== deferredComments;

      const handleChange = e => {
        const isbn = e.target.value;
        setIsbn(isbn);
        setComments(commentList.filter(c => c.isbn === isbn));
      };

      return (
          <>
          <select onChange={handleChange}>
            <option value="">선택해주세요.</option>
            {books.map(b => (
               <option key={b.isbn} value={b.isbn}>{b.title}</option>
            ))}
          </select>
          <BookDetails isbn={isbn} />
          <hr />
          <CommentList src={deferredComments} isPending={isPending} />
          </>
      );
    }