рдХреНрдпрд╛ рдЖрдк рдХрд┐рд╕реА рд╕реБрд╡рд┐рдзрд╛ рдХрд╛ рдЕрдиреБрд░реЛрдз рдХрд░рдирд╛ рдЪрд╛рд╣рддреЗ рдмрдЧ рдХреА рд░рд┐рдкреЛрд░реНрдЯ рдХрд░рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ?
рдмрдЧ
рд╡рд░реНрддрдорд╛рди рд╡реНрдпрд╡рд╣рд╛рд░ рдХреНрдпрд╛ рд╣реИ?
рдХрд┐рд╕реА рдШрдЯрдХ рдХреЗ рд▓рд┐рдП рдХрдВрд╕реЛрд▓ рдореЗрдВ рдПрдХ рдЪреЗрддрд╛рд╡рдиреА рджрд┐рдЦрд╛рдИ рдЧрдИ рд╣реИ, рдЬрд┐рд╕рдореЗрдВ рдирд┐рдореНрдирд▓рд┐рдЦрд┐рдд рд╕рднреА рд╢рд░реНрддреЗрдВ рд╣реИрдВ:
React.memo
рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдпрд╛рдж рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИрдЙрд╕ рдЪреЗрддрд╛рд╡рдиреА рдХрд╛ рдкрд╛рда: Warning: ComponentName: Rendered more hooks than during the previous render. This is not currently supported and may lead to unexpected behavior.
рдпрджрд┐ рд╡рд░реНрддрдорд╛рди рд╡реНрдпрд╡рд╣рд╛рд░ рдмрдЧ рд╣реИ, рддреЛ рдХреГрдкрдпрд╛ рдкреБрди: рдкреЗрд╢ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдЪрд░рдг рдкреНрд░рджрд╛рди рдХрд░реЗрдВ рдФрд░ рдпрджрд┐ рд╕рдВрднрд╡ рд╣реЛ рддреЛ рд╕рдорд╕реНрдпрд╛ рдХрд╛ рдПрдХ рдиреНрдпреВрдирддрдо рдбреЗрдореЛред рдЕрдкрдиреЗ JSFiddle (https://jsfiddle.net/Luktwrdm/) рдпрд╛ CodeSandbox (https://codesandbox.io/s/new) рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП рдиреАрдЪреЗ рджрд┐рдП рдЧрдП рд▓рд┐рдВрдХ рдХреЛ рдкреЗрд╕реНрдЯ рдХрд░реЗрдВ:
https://codesandbox.io/s/71lr16j491
рдЕрдкреЗрдХреНрд╖рд┐рдд рд╡реНрдпрд╡рд╣рд╛рд░ рдХреНрдпрд╛ рд╣реИ?
рдХреЛрдИ рдЪреЗрддрд╛рд╡рдиреА рдирд╣реАрдВ рджрд┐рдЦрд╛рдИ рдЬрд╛рдиреА рдЪрд╛рд╣рд┐рдП рдХреНрдпреЛрдВрдХрд┐ рд╣реБрдХ рдХреЗ рдирд┐рдпрдо рдорд┐рд▓рддреЗ рд╣реИрдВред рдЗрд╕рдХреЗ рдЕрд▓рд╛рд╡рд╛, рд╡реНрдпрд╡рд╣рд╛рд░ рдХреЛрдИ рдмрд╛рдд рдирд╣реАрдВ рд╣реЛрдиреА рдЪрд╛рд╣рд┐рдП рдЕрдЧрд░ React.memo
рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ рдпрд╛ рдирд╣реАрдВред
рд░рд┐рдПрдХреНрдЯ рдХреЗ рдХреМрди рд╕реЗ рд╕рдВрд╕реНрдХрд░рдг рдФрд░ рдХреМрди рд╕реЗ рдмреНрд░рд╛рдЙрдЬрд╝рд░ / OS рдЗрд╕ рд╕рдорд╕реНрдпрд╛ рд╕реЗ рдкреНрд░рднрд╛рд╡рд┐рдд рд╣реИрдВ?
рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ 16.8.1
рдореЗрд░рд╛ рдкрд╣рд▓рд╛ рдкрдврд╝рд╛ рдпрд╣ рдПрдХ рдмрдЧ рд╣реИред
рдореИрдВрдиреЗ рд╕рдВрд╕реНрдХрд░рдг 16.8.1
рдореЗрдВ рдЗрд╕ рдмрд╣реБрдд рд╣реА рд╕рдорд╕реНрдпрд╛ рдХреЛ рджреЗрдЦрд╛ред рд╣рд╛рд▓рд╛рдБрдХрд┐ рдореЗрд░реЗ рдорд╛рдорд▓реЗ рдореЗрдВ рдЙрд╕ рдЬрдЧрд╣ рдХреЗ рдмреАрдЪ рдХреЛрдИ рдЬреНрдЮрд╛рдкрди рдШрдЯрдХ рдирд╣реАрдВ рд╣реИ рдЬрд╣рд╛рдБ Promise
рдлреЗрдВрдХрд╛ рдЧрдпрд╛ рд╣реЛ рдФрд░ Suspense
рдШрдЯрдХ рд╣реЛред
рдШрдЯрдХ Promise
рдлреЗрдВрдХреЗ рдЬрд╛рдиреЗ рд╕реЗ рдкрд╣рд▓реЗ рд╢реАрд░реНрд╖ рдкрд░ рджреЛ рд╣реБрдХ рдХреА рдШреЛрд╖рдгрд╛ рдХрд░рддрд╛ рд╣реИ рдФрд░ рдЪреЗрддрд╛рд╡рдиреА рджрд┐рдЦрд╛рдИ рджреЗрддреА рд╣реИред рдореИрдВрдиреЗ рд╣реБрдХ рд╕реЗ рдкрд╣рд▓реЗ Promise
рдХреЛ рд╢реАрд░реНрд╖ рдкрд░ рдлреЗрдВрдХ рджрд┐рдпрд╛, рдФрд░ рдпрд╣реА рдмрд╛рдд рд╣реЛрддреА рд╣реИред рдЪреЗрддрд╛рд╡рдиреА рдЧрд╛рдпрдм рд╣реЛ рдЬрд╛рддреА рд╣реИ рдЕрдЧрд░ рдШрдЯрдХ рдХреЗ рднреАрддрд░ рдХреЛрдИ Promise
ред
рдореЗрд░реЗ рдШрдЯрдХ рдХрд╛ рдордЬрд╛рдХ рдХреБрдЫ рдЗрд╕ рддрд░рд╣ рд╣реИ:
function Component(props) {
const [state, setState] = useState()
useEffect(...)
// Promise is thrown somewhere after these two
// hooks on top, but before the return statement.
return (
...
)
}
рдЗрд╕рдХреА рдкреБрд╖реНрдЯрд┐ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред
16.8.2 рдореЗрдВ рддрдп рдХрд┐рдпрд╛ рдЧрдпрд╛ред
https://codesandbox.io/s/vmmkmvo6pl
рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА
16.8.2 рдореЗрдВ рддрдп рдХрд┐рдпрд╛ рдЧрдпрд╛ред
https://codesandbox.io/s/vmmkmvo6pl