useImperativeHandle を迷いながら使った話

React Osaka 2024 10

Transcript

1. useImperativeHandle Λ໎͍ͳ͕Β࢖ͬͨ࿩ React Osaka 2024 10 2024.10.4 @kamiyam
2. ࣗݾ঺հ ͔Έ΍Μ (X@kamiyam) ݩࣗಈं੔උ࢜ METEORWORKS Inc. Engineer ϑϩϯτʙ όοΫΤϯυ JavaScript/Node.js શൠ
3. useImperativeHandle
4. useImperativeHandleΛ(࢓༷తʹ)໎͍ͳ͕Β ࢖͓ͬͨ࿩
5. ࣄͷى͜Γ
6. form Λ·ͱΊͨίϯϙʔωϯτΛ࣮૷
7. detailValues ͷ஋ΛϦηοτ(ॳظ஋ʹ໭͢)Λ࣮૷͍ͨ͠ ͱ͍͏ཁ๬͕ग़ͨ ͦͯ͠ϦηοτΛ੍ޚ͢Δཁૉ͸֎෦ʹଘࡏ͢Δ
8. DetailForm ͷ֎෦͔ΒϦηοτॲཧΛߦ͏ ͱ͍͏࣮૷͕ඞཁ
9. detailValues ʹ౉ͨ͠ॳظ஋Λmemo͓͍ͯͯ͠ Ϧηοτ࣮ߦ࣌ʹpropsΛ࠶౓౉͢? ΋͘͠͸isInitial Έ͍ͨͳϑϥάΛpropsͰ౉͢?
10. VTF*NQFSBUJWF)BOEMF
    VTF*NQFSBUJWF)BOEMF
    ͸ɺSFG
    ͱͯ͠ެ։͞ΕΔϋϯυϧΛ ΧελϚΠζ͢ΔͨΊͷ
    3FBDU
    ϑοΫͰ͢ɻ IUUQTSFBDUEFWSFGFSFODFSFBDUVTF*NQFSBUJWF)BOEMF
11. IUUQTSFBDUEFWSFGFSFODFSFBDUVTF*NQFSBUJWF)BOEMF
16. ࣮૷ʹ͍ͭͯ͸ https://ja.react.dev/reference/react/useImperativeHandle Λݩʹղઆ͠·͢
17. ͭ·Γ ref Λ௨ͯ͡ίϯϙʔωϯτʹ ॲཧΛੜ΍͢͜ͱ͕Ͱ͖Δɻͱ͍͏͜ͱ
18. ར༻ऀͱͯ͠͸ΊͪΌศར͕ͩ props(ม਺)Λ༻͍ͯৼΔ෣͍͕มΘΔͷ͕ ຊདྷͷܗͳͷͰ͸?
19. https://ja.react.dev/reference/react/useImperativeHandle
20. https://react.dev/reference/react/useImperativeHandle
21. “ྫ͑͹ɺModal ίϯϙʔωϯτ͔Β { open, close } ͷΑ͏ͳ໋ྩ ܕͷϋϯυϧΛެ։͢ΔͷͰ͸ͳ͘ɺ<Modal isOpen={isOpen} /> ͷΑ͏ʹɺisOpen Λ props ͱͯ͠ड͚औΔํ͕ྑ͍Ͱ͠ΐ͏ɻ ໋ྩܕͷಈ࡞Λ props ͱͯ͠ެ։͢Δࡍʹ͸ΤϑΣΫτ͕໾ཱͪ ·͢ɻ”
22. IUUQTSFBDUEFWMFBSOTZODISPOJ[JOHXJUIF ff FDUT
23. ΤϑΣΫτͷ߲Ͱ͸ props isPlaying:boolean ʹΑͬͯৼΔ෣͍͕มΘ͍ͬͯΔ
24. ͳΔ΄ͲΘ͔ΒΜ…🤦
25. ܾఆతͳ౴͑Λ୳ͯ͠·࣮ͨ૷͢Δ೔ʑͳͷͰ͋ͬͨ…
26. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
27. Refs. useImperativeHandle https://react.dev/reference/react/useImperativeHandle Synchronizing with Effects https://react.dev/learn/synchronizing-with-effects