Latihan 1 dari materi React Performance Patterns di Performance — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Lengkapi dua function di kode awal.
shouldMemoize(componentRenderData) menerima object { renderCount, propsChangedPercent, computationMs } dan mengembalikan boolean true hanya kalau ketiganya terpenuhi: renderCount > 5, propsChangedPercent < 30, dan computationMs > 10. Selain itu false. Pakai > dan <, bukan >= atau <=.identifyUnneededReRenders(components) menerima array berisi { name, propsChanged } dan mengembalikan array baru berisi object yang propsChanged-nya false, dengan urutan yang sama. Object-nya dikembalikan utuh, bukan cuma namanya.Yang dicek:
shouldMemoize({ renderCount: 10, propsChangedPercent: 20, computationMs: 15 }) mengembalikan trueshouldMemoize({ renderCount: 3, propsChangedPercent: 20, computationMs: 15 }) mengembalikan falseshouldMemoize({ renderCount: 10, propsChangedPercent: 50, computationMs: 15 }) mengembalikan false{ renderCount: 10, propsChangedPercent: 20, computationMs: 5 } harus false, dan { renderCount: 6, propsChangedPercent: 29, computationMs: 11 } harus true.identifyUnneededReRenders untuk Header (propsChanged: false), UserCard (true), dan Footer (false) mengembalikan [{ name: "Header", propsChanged: false }, { name: "Footer", propsChanged: false }]propsChanged: true harus menghasilkan [].Baris console.log di kode awal biarkan saja.
