React: React.memo рдФрд░ useContext рд╣реБрдХ рдХреЗ рд╕рд╛рде рдкреБрди: рдкреНрд░рд╕реНрддреБрдд рдХрд░рдиреЗ рдХреЛ рд░реЛрдХрдирд╛ред

рдХреЛ рдирд┐рд░реНрдорд┐рдд 19 рдорд╛рд░реНрдЪ 2019  ┬╖  37рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: facebook/react

рдХреНрдпрд╛ рдЖрдк рдХрд┐рд╕реА рд╕реБрд╡рд┐рдзрд╛ рдХрд╛ рдЕрдиреБрд░реЛрдз рдХрд░рдирд╛ рдЪрд╛рд╣рддреЗ рдмрдЧ рдХреА рд░рд┐рдкреЛрд░реНрдЯ рдХрд░рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ?

рдХреАрдбрд╝рд╛

рд╡рд░реНрддрдорд╛рди рд╡реНрдпрд╡рд╣рд╛рд░ рдХреНрдпрд╛ рд╣реИ?

рдореИрдВ React.memo рдХреЗ рд╕рд╛рде рдЕрдирд╛рд╡рд╢реНрдпрдХ рдкреБрди: рдкреНрд░рд╕реНрддреБрдд рдХрд░рдиреЗ рдХреЛ рд░реЛрдХрдиреЗ рдХреЗ рд▓рд┐рдП (useContext рд╣реБрдХ) рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рд╕рдВрджрд░реНрдн API рд╕реЗ рдбреЗрдЯрд╛ рдкрд░ рднрд░реЛрд╕рд╛ рдирд╣реАрдВ рдХрд░ рд╕рдХрддрд╛

рдпрджрд┐ рд╡рд░реНрддрдорд╛рди рд╡реНрдпрд╡рд╣рд╛рд░ рдПрдХ рдмрдЧ рд╣реИ, рддреЛ рдХреГрдкрдпрд╛ рдкреБрди: рдкреЗрд╢ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдХрджрдо рдкреНрд░рджрд╛рди рдХрд░реЗрдВ рдФрд░ рдпрджрд┐ рд╕рдВрднрд╡ рд╣реЛ рддреЛ рд╕рдорд╕реНрдпрд╛ рдХрд╛ рдиреНрдпреВрдирддрдо рдбреЗрдореЛ рдкреНрд░рджрд╛рди рдХрд░реЗрдВред рд▓рд┐рдВрдХ рдХреЛ рдЕрдкрдиреЗ JSFiddle (https://jsfiddle.net/Luktwrdm/) рдпрд╛ рдХреЛрдбрд╕реИрдВрдбрдмреЙрдХреНрд╕ (https://codesandbox.io/s/new) рдЙрджрд╛рд╣рд░рдг рдореЗрдВ рдиреАрдЪреЗ рдкреЗрд╕реНрдЯ рдХрд░реЗрдВ:

React.memo(() => {
const [globalState] = useContext(SomeContext);

render ...

}, (prevProps, nextProps) => {

// How to rely on context in here?
// I need to rerender component only if globalState contains nextProps.value

});

рдЕрдкреЗрдХреНрд╖рд┐рдд рд╡реНрдпрд╡рд╣рд╛рд░ рдХреНрдпрд╛ рд╣реИ?

рд░реЗрдВрдбрд░рд┐рдВрдЧ рдХреЛ рд░реЛрдХрдиреЗ рдХреЗ рд▓рд┐рдП рдореБрдЭреЗ рдХрд┐рд╕реА рднреА рддрд░рд╣ React.memo рд╕реЗрдХреЗрдВрдб рддрд░реНрдХ рдХреЙрд▓рдмреИрдХ рдореЗрдВ рд╕рдВрджрд░реНрдн рддрдХ рдкрд╣реБрдВрдЪ рдкреНрд░рд╛рдкреНрдд рдХрд░рдиреА рдЪрд╛рд╣рд┐рдП
рдпрд╛ рдореБрдЭреЗ рдлрд╝рдВрдХреНрд╢рди рдмреЙрдбреА рдореЗрдВ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдШрдЯрдХ рдХреЗ рдкреБрд░рд╛рдиреЗ рдЙрджрд╛рд╣рд░рдг рдХреЛ рд╡рд╛рдкрд╕ рдХрд░рдиреЗ рдХреА рд╕рдВрднрд╛рд╡рдирд╛ рд╣реЛрдиреА рдЪрд╛рд╣рд┐рдПред

рд░рд┐рдПрдХреНрдЯ рдХреЗ рдХреМрди рд╕реЗ рд╕рдВрд╕реНрдХрд░рдг, рдФрд░ рдХреМрди рд╕реЗ рдмреНрд░рд╛рдЙрдЬрд╝рд░/рдУрдПрд╕ рдЗрд╕ рд╕рдорд╕реНрдпрд╛ рд╕реЗ рдкреНрд░рднрд╛рд╡рд┐рдд рд╣реИрдВ?
16.8.4

рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА

рдпрд╣ рдбрд┐рдЬрд╛рдЗрди рдХреЗ рд░реВрдк рдореЗрдВ рдХрд╛рдо рдХрд░ рд░рд╣рд╛ рд╣реИред рдпрджрд┐ рдЖрдк рдЙрддреНрд╕реБрдХ рд╣реИрдВ рддреЛ https://github.com/facebook/react/issues/14110 рдореЗрдВ рдЗрд╕рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рд▓рдВрдмреА рдЪрд░реНрдЪрд╛ рд╣реИред

рдорд╛рди рд▓реЗрдВ рдХрд┐ рдХрд┐рд╕реА рдХрд╛рд░рдг рд╕реЗ рдЖрдкрдХреЗ рдкрд╛рд╕ AppContext рдЬрд┐рд╕рдХреЗ рдореВрд▓реНрдп рдореЗрдВ theme рд╕рдВрдкрддреНрддрд┐ рд╣реИ, рдФрд░ рдЖрдк appContextValue.theme рдкрд░рд┐рд╡рд░реНрддрдиреЛрдВ рдкрд░ рдХреЗрд╡рд▓ рдХреБрдЫ ExpensiveTree рдХреЛ рдлрд┐рд░ рд╕реЗ рдкреНрд░рд╕реНрддреБрдд рдХрд░рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВред

TLDR рдпрд╣ рд╣реИ рдХрд┐ рдЕрднреА рдХреЗ рд▓рд┐рдП, рдЖрдкрдХреЗ рдкрд╛рд╕ рддреАрди рд╡рд┐рдХрд▓реНрдк рд╣реИрдВ:

рд╡рд┐рдХрд▓реНрдк 1 (рдкрд╕рдВрджреАрджрд╛): рдЙрди рд╕рдВрджрд░реНрднреЛрдВ рдХреЛ рд╡рд┐рднрд╛рдЬрд┐рдд рдХрд░реЗрдВ рдЬреЛ рдПрдХ рд╕рд╛рде рдирд╣реАрдВ рдмрджрд▓рддреЗ рд╣реИрдВ

рдпрджрд┐ рд╣рдореЗрдВ рдХрдИ рдШрдЯрдХреЛрдВ рдореЗрдВ рдХреЗрд╡рд▓ appContextValue.theme рд╣реИ рд▓реЗрдХрд┐рди appContextValue рд╕реНрд╡рдпрдВ рдмрд╣реБрдд рдмрд╛рд░ рдмрджрд▓рддрд╛ рд╣реИ, рддреЛ рд╣рдо ThemeContext рдХреЛ AppContext рд╕реЗ рд╡рд┐рднрд╛рдЬрд┐рдд рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред

function Button() {
  let theme = useContext(ThemeContext);
  // The rest of your rendering logic
  return <ExpensiveTree className={theme} />;
}

рдЕрдм AppContext рдХрд╛ рдХреЛрдИ рднреА рдкрд░рд┐рд╡рд░реНрддрди ThemeContext рдЙрдкрднреЛрдХреНрддрд╛рдУрдВ рдХреЛ рдлрд┐рд░ рд╕реЗ рдкреНрд░рд╕реНрддреБрдд рдирд╣реАрдВ рдХрд░реЗрдЧрд╛ред

рдпрд╣ рдкрд╕рдВрджреАрджрд╛ рдлрд┐рдХреНрд╕ рд╣реИред рдлрд┐рд░ рдЖрдкрдХреЛ рдХрд┐рд╕реА рд╡рд┐рд╢реЗрд╖ рдЦреИрд░рд╛рдд рдХреА рдЬрд░реВрд░рдд рдирд╣реАрдВ рд╣реИред

рд╡рд┐рдХрд▓реНрдк 2: рдЕрдкрдиреЗ рдШрдЯрдХ рдХреЛ рджреЛ рднрд╛рдЧреЛрдВ рдореЗрдВ рд╡рд┐рднрд╛рдЬрд┐рдд рдХрд░реЗрдВ, рдмреАрдЪ рдореЗрдВ memo рдбрд╛рд▓реЗрдВ

рдпрджрд┐ рдХрд┐рд╕реА рдХрд╛рд░рдг рд╕реЗ рдЖрдк рд╕рдВрджрд░реНрднреЛрдВ рдХреЛ рд╡рд┐рднрд╛рдЬрд┐рдд рдирд╣реАрдВ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ, рддреЛ рдЖрдк рдЕрднреА рднреА рдПрдХ рдШрдЯрдХ рдХреЛ рджреЛ рдореЗрдВ рд╡рд┐рднрд╛рдЬрд┐рдд рдХрд░рдХреЗ рдФрд░ рдЕрдзрд┐рдХ рд╡рд┐рд╢рд┐рд╖реНрдЯ рдкреНрд░реЙрдкреНрд╕ рдХреЛ рдЖрдВрддрд░рд┐рдХ рдореЗрдВ рдкрд╛рд╕ рдХрд░рдХреЗ рд░реЗрдВрдбрд░рд┐рдВрдЧ рдХреЛ рдЕрдиреБрдХреВрд▓рд┐рдд рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред рдЖрдк рдЕрднреА рднреА рдмрд╛рд╣рд░реА рдХреЛ рдкреНрд░рд╕реНрддреБрдд рдХрд░реЗрдВрдЧреЗ, рд▓реЗрдХрд┐рди рдпрд╣ рд╕рд╕реНрддрд╛ рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдП рдХреНрдпреЛрдВрдХрд┐ рдпрд╣ рдХреБрдЫ рднреА рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИред

function Button() {
  let appContextValue = useContext(AppContext);
  let theme = appContextValue.theme; // Your "selector"
  return <ThemedButton theme={theme} />
}

const ThemedButton = memo(({ theme }) => {
  // The rest of your rendering logic
  return <ExpensiveTree className={theme} />;
});

рд╡рд┐рдХрд▓реНрдк 3: рдПрдХ рдШрдЯрдХ рдЬрд┐рд╕рдореЗрдВ useMemo рдЕрдВрджрд░ рд╣реИ

рдЕрдВрдд рдореЗрдВ, рд╣рдо рдЕрдкрдиреЗ рдХреЛрдб рдХреЛ рдереЛрдбрд╝рд╛ рдЕрдзрд┐рдХ рд╡рд░реНрдмреЛрдЬрд╝ рдмрдирд╛ рд╕рдХрддреЗ рд╣реИрдВ рд▓реЗрдХрд┐рди рдЗрд╕реЗ useMemo рдореЗрдВ рд░рд┐рдЯрд░реНрди рд╡реИрд▓реНрдпреВ рд▓рдкреЗрдЯрдХрд░ рдФрд░ рдЗрд╕рдХреА рдирд┐рд░реНрднрд░рддрд╛ рдирд┐рд░реНрджрд┐рд╖реНрдЯ рдХрд░рдХреЗ рдЗрд╕реЗ рдПрдХ рдШрдЯрдХ рдореЗрдВ рд░рдЦ рд╕рдХрддреЗ рд╣реИрдВред рд╣рдорд╛рд░рд╛ рдШрдЯрдХ рдЕрднреА рднреА рдлрд┐рд░ рд╕реЗ рдирд┐рд╖реНрдкрд╛рджрд┐рдд рд╣реЛрдЧрд╛, рд▓реЗрдХрд┐рди рдпрджрд┐ рд╕рднреА useMemo рдЗрдирдкреБрдЯ рд╕рдорд╛рди рд╣реИрдВ, рддреЛ рд░рд┐рдПрдХреНрдЯ рдЪрд╛рдЗрд▓реНрдб рдЯреНрд░реА рдХреЛ рдлрд┐рд░ рд╕реЗ рдкреНрд░рд╕реНрддреБрдд рдирд╣реАрдВ рдХрд░реЗрдЧрд╛ред

function Button() {
  let appContextValue = useContext(AppContext);
  let theme = appContextValue.theme; // Your "selector"

  return useMemo(() => {
    // The rest of your rendering logic
    return <ExpensiveTree className={theme} />;
  }, [theme])
}

рднрд╡рд┐рд╖реНрдп рдореЗрдВ рдФрд░ рд╕рдорд╛рдзрд╛рди рд╣реЛ рд╕рдХрддреЗ рд╣реИрдВ рд▓реЗрдХрд┐рди рдЕрднреА рд╣рдорд╛рд░реЗ рдкрд╛рд╕ рдпрд╣реА рд╣реИред

рдлрд┐рд░ рднреА, рдзреНрдпрд╛рди рджреЗрдВ рдХрд┐ рд╡рд┐рдХрд▓реНрдк 1 рдмреЗрд╣рддрд░ рд╣реИ - рдпрджрд┐ рдХреБрдЫ рд╕рдВрджрд░реНрдн рдмрд╣реБрдд рдмрд╛рд░ рдмрджрд▓рддреЗ рд╣реИрдВ, рддреЛ рдЗрд╕реЗ рд╡рд┐рднрд╛рдЬрд┐рдд рдХрд░рдиреЗ рдкрд░ рд╡рд┐рдЪрд╛рд░ рдХрд░реЗрдВ ред

рд╕рднреА 37 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

рдпрд╣ рдбрд┐рдЬрд╛рдЗрди рдХреЗ рд░реВрдк рдореЗрдВ рдХрд╛рдо рдХрд░ рд░рд╣рд╛ рд╣реИред рдпрджрд┐ рдЖрдк рдЙрддреНрд╕реБрдХ рд╣реИрдВ рддреЛ https://github.com/facebook/react/issues/14110 рдореЗрдВ рдЗрд╕рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рд▓рдВрдмреА рдЪрд░реНрдЪрд╛ рд╣реИред

рдорд╛рди рд▓реЗрдВ рдХрд┐ рдХрд┐рд╕реА рдХрд╛рд░рдг рд╕реЗ рдЖрдкрдХреЗ рдкрд╛рд╕ AppContext рдЬрд┐рд╕рдХреЗ рдореВрд▓реНрдп рдореЗрдВ theme рд╕рдВрдкрддреНрддрд┐ рд╣реИ, рдФрд░ рдЖрдк appContextValue.theme рдкрд░рд┐рд╡рд░реНрддрдиреЛрдВ рдкрд░ рдХреЗрд╡рд▓ рдХреБрдЫ ExpensiveTree рдХреЛ рдлрд┐рд░ рд╕реЗ рдкреНрд░рд╕реНрддреБрдд рдХрд░рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВред

TLDR рдпрд╣ рд╣реИ рдХрд┐ рдЕрднреА рдХреЗ рд▓рд┐рдП, рдЖрдкрдХреЗ рдкрд╛рд╕ рддреАрди рд╡рд┐рдХрд▓реНрдк рд╣реИрдВ:

рд╡рд┐рдХрд▓реНрдк 1 (рдкрд╕рдВрджреАрджрд╛): рдЙрди рд╕рдВрджрд░реНрднреЛрдВ рдХреЛ рд╡рд┐рднрд╛рдЬрд┐рдд рдХрд░реЗрдВ рдЬреЛ рдПрдХ рд╕рд╛рде рдирд╣реАрдВ рдмрджрд▓рддреЗ рд╣реИрдВ

рдпрджрд┐ рд╣рдореЗрдВ рдХрдИ рдШрдЯрдХреЛрдВ рдореЗрдВ рдХреЗрд╡рд▓ appContextValue.theme рд╣реИ рд▓реЗрдХрд┐рди appContextValue рд╕реНрд╡рдпрдВ рдмрд╣реБрдд рдмрд╛рд░ рдмрджрд▓рддрд╛ рд╣реИ, рддреЛ рд╣рдо ThemeContext рдХреЛ AppContext рд╕реЗ рд╡рд┐рднрд╛рдЬрд┐рдд рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред

function Button() {
  let theme = useContext(ThemeContext);
  // The rest of your rendering logic
  return <ExpensiveTree className={theme} />;
}

рдЕрдм AppContext рдХрд╛ рдХреЛрдИ рднреА рдкрд░рд┐рд╡рд░реНрддрди ThemeContext рдЙрдкрднреЛрдХреНрддрд╛рдУрдВ рдХреЛ рдлрд┐рд░ рд╕реЗ рдкреНрд░рд╕реНрддреБрдд рдирд╣реАрдВ рдХрд░реЗрдЧрд╛ред

рдпрд╣ рдкрд╕рдВрджреАрджрд╛ рдлрд┐рдХреНрд╕ рд╣реИред рдлрд┐рд░ рдЖрдкрдХреЛ рдХрд┐рд╕реА рд╡рд┐рд╢реЗрд╖ рдЦреИрд░рд╛рдд рдХреА рдЬрд░реВрд░рдд рдирд╣реАрдВ рд╣реИред

рд╡рд┐рдХрд▓реНрдк 2: рдЕрдкрдиреЗ рдШрдЯрдХ рдХреЛ рджреЛ рднрд╛рдЧреЛрдВ рдореЗрдВ рд╡рд┐рднрд╛рдЬрд┐рдд рдХрд░реЗрдВ, рдмреАрдЪ рдореЗрдВ memo рдбрд╛рд▓реЗрдВ

рдпрджрд┐ рдХрд┐рд╕реА рдХрд╛рд░рдг рд╕реЗ рдЖрдк рд╕рдВрджрд░реНрднреЛрдВ рдХреЛ рд╡рд┐рднрд╛рдЬрд┐рдд рдирд╣реАрдВ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ, рддреЛ рдЖрдк рдЕрднреА рднреА рдПрдХ рдШрдЯрдХ рдХреЛ рджреЛ рдореЗрдВ рд╡рд┐рднрд╛рдЬрд┐рдд рдХрд░рдХреЗ рдФрд░ рдЕрдзрд┐рдХ рд╡рд┐рд╢рд┐рд╖реНрдЯ рдкреНрд░реЙрдкреНрд╕ рдХреЛ рдЖрдВрддрд░рд┐рдХ рдореЗрдВ рдкрд╛рд╕ рдХрд░рдХреЗ рд░реЗрдВрдбрд░рд┐рдВрдЧ рдХреЛ рдЕрдиреБрдХреВрд▓рд┐рдд рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред рдЖрдк рдЕрднреА рднреА рдмрд╛рд╣рд░реА рдХреЛ рдкреНрд░рд╕реНрддреБрдд рдХрд░реЗрдВрдЧреЗ, рд▓реЗрдХрд┐рди рдпрд╣ рд╕рд╕реНрддрд╛ рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдП рдХреНрдпреЛрдВрдХрд┐ рдпрд╣ рдХреБрдЫ рднреА рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИред

function Button() {
  let appContextValue = useContext(AppContext);
  let theme = appContextValue.theme; // Your "selector"
  return <ThemedButton theme={theme} />
}

const ThemedButton = memo(({ theme }) => {
  // The rest of your rendering logic
  return <ExpensiveTree className={theme} />;
});

рд╡рд┐рдХрд▓реНрдк 3: рдПрдХ рдШрдЯрдХ рдЬрд┐рд╕рдореЗрдВ useMemo рдЕрдВрджрд░ рд╣реИ

рдЕрдВрдд рдореЗрдВ, рд╣рдо рдЕрдкрдиреЗ рдХреЛрдб рдХреЛ рдереЛрдбрд╝рд╛ рдЕрдзрд┐рдХ рд╡рд░реНрдмреЛрдЬрд╝ рдмрдирд╛ рд╕рдХрддреЗ рд╣реИрдВ рд▓реЗрдХрд┐рди рдЗрд╕реЗ useMemo рдореЗрдВ рд░рд┐рдЯрд░реНрди рд╡реИрд▓реНрдпреВ рд▓рдкреЗрдЯрдХрд░ рдФрд░ рдЗрд╕рдХреА рдирд┐рд░реНрднрд░рддрд╛ рдирд┐рд░реНрджрд┐рд╖реНрдЯ рдХрд░рдХреЗ рдЗрд╕реЗ рдПрдХ рдШрдЯрдХ рдореЗрдВ рд░рдЦ рд╕рдХрддреЗ рд╣реИрдВред рд╣рдорд╛рд░рд╛ рдШрдЯрдХ рдЕрднреА рднреА рдлрд┐рд░ рд╕реЗ рдирд┐рд╖реНрдкрд╛рджрд┐рдд рд╣реЛрдЧрд╛, рд▓реЗрдХрд┐рди рдпрджрд┐ рд╕рднреА useMemo рдЗрдирдкреБрдЯ рд╕рдорд╛рди рд╣реИрдВ, рддреЛ рд░рд┐рдПрдХреНрдЯ рдЪрд╛рдЗрд▓реНрдб рдЯреНрд░реА рдХреЛ рдлрд┐рд░ рд╕реЗ рдкреНрд░рд╕реНрддреБрдд рдирд╣реАрдВ рдХрд░реЗрдЧрд╛ред

function Button() {
  let appContextValue = useContext(AppContext);
  let theme = appContextValue.theme; // Your "selector"

  return useMemo(() => {
    // The rest of your rendering logic
    return <ExpensiveTree className={theme} />;
  }, [theme])
}

рднрд╡рд┐рд╖реНрдп рдореЗрдВ рдФрд░ рд╕рдорд╛рдзрд╛рди рд╣реЛ рд╕рдХрддреЗ рд╣реИрдВ рд▓реЗрдХрд┐рди рдЕрднреА рд╣рдорд╛рд░реЗ рдкрд╛рд╕ рдпрд╣реА рд╣реИред

рдлрд┐рд░ рднреА, рдзреНрдпрд╛рди рджреЗрдВ рдХрд┐ рд╡рд┐рдХрд▓реНрдк 1 рдмреЗрд╣рддрд░ рд╣реИ - рдпрджрд┐ рдХреБрдЫ рд╕рдВрджрд░реНрдн рдмрд╣реБрдд рдмрд╛рд░ рдмрджрд▓рддреЗ рд╣реИрдВ, рддреЛ рдЗрд╕реЗ рд╡рд┐рднрд╛рдЬрд┐рдд рдХрд░рдиреЗ рдкрд░ рд╡рд┐рдЪрд╛рд░ рдХрд░реЗрдВ ред

рдпрджрд┐ рдереАрдо рдирд╣реАрдВ рдмрджрд▓реА рд╣реИ рддреЛ рдпреЗ рджреЛрдиреЛрдВ рд╡рд┐рдХрд▓реНрдк рдмрдЪреНрдЪреЛрдВ рдХреЛ рдкреНрд░рд╕реНрддреБрдд рдХрд░рдиреЗ рд╕реЗ рдмрд╛рд╣рд░ рд╣реЛ рдЬрд╛рдПрдВрдЧреЗред

@gaearon рдХреНрдпрд╛ рдмрдЯрди рдмрдЪреНрдЪреЗ рд╣реИрдВ рдпрд╛ рдмрдЯрди рдмрдЪреНрдЪреЛрдВ рдХреЛ рдкреНрд░рд╕реНрддреБрдд рдХрд░рддреЗ рд╣реИрдВ? рдореБрдЭреЗ рдХреБрдЫ рд╕рдВрджрд░реНрдн рдпрд╛рдж рдЖ рд░рд╣реЗ рд╣реИрдВ рдХрд┐ рдЗрдирдХрд╛ рдЙрдкрдпреЛрдЧ рдХреИрд╕реЗ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред

unstable_Profiler рд╡рд┐рдХрд▓реНрдк 2 рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛ рдЕрднреА рднреА onRender рдХреЙрд▓рдмреИрдХ рдХреЛ рдЯреНрд░рд┐рдЧрд░ рдХрд░реЗрдЧрд╛ рд▓реЗрдХрд┐рди рд╡рд╛рд╕реНрддрд╡рд┐рдХ рд░реЗрдВрдбрд░ рд▓реЙрдЬрд┐рдХ рдХреЛ рдХреЙрд▓ рдирд╣реАрдВ рдХрд░реЗрдЧрд╛ред рд╢рд╛рдпрдж рдореИрдВ рдХреБрдЫ рдЧрд▓рдд рдХрд░ рд░рд╣рд╛ рд╣реВрдБ? ~ https://codesandbox.io/s/kxz4o2oyoo~ https://codesandbox.io/s/00yn9yqzjw

рдореИрдВрдиреЗ рд╕реНрдкрд╖реНрдЯ рд╣реЛрдиреЗ рдХреЗ рд▓рд┐рдП рдЙрджрд╛рд╣рд░рдг рдЕрдкрдбреЗрдЯ рдХрд┐рдпрд╛ред

рдЕрд╕реНрдерд┐рд░_рдкреНрд░реЛрдлрд╛рдЗрд▓рд░ рд╡рд┐рдХрд▓реНрдк 2 рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛ рдЕрднреА рднреА рдСрдирд░реЗрдВрдбрд░ рдХреЙрд▓рдмреИрдХ рдХреЛ рдЯреНрд░рд┐рдЧрд░ рдХрд░реЗрдЧрд╛ рд▓реЗрдХрд┐рди рд╡рд╛рд╕реНрддрд╡рд┐рдХ рд░реЗрдВрдбрд░ рд▓реЙрдЬрд┐рдХ рдХреЛ рдХреЙрд▓ рдирд╣реАрдВ рдХрд░реЗрдЧрд╛ред рд╢рд╛рдпрдж рдореИрдВ рдХреБрдЫ рдЧрд▓рдд рдХрд░ рд░рд╣рд╛ рд╣реВрдБ? https://codesandbox.io/s/kxz4o2ooo

рдареАрдХ рдпрд╣реА рдЙрд╕ рд╡рд┐рдХрд▓реНрдк рдХреА рдмрд╛рдд рд╣реИред :-)

рд╣реЛ рд╕рдХрддрд╛ рд╣реИ рдХрд┐ рдЗрд╕рдХреЗ рд▓рд┐рдП рдПрдХ рдЕрдЪреНрдЫрд╛ рд╕рдорд╛рдзрд╛рди рдпрд╣ рд╣реЛрдЧрд╛ рдХрд┐ рд╕рдВрджрд░реНрдн рдХреЛ "рд▓реЗрдиреЗ" рдХреА рд╕рдВрднрд╛рд╡рдирд╛ рд╣реЛ рдФрд░ рдХреЗрд╡рд▓ рдХреЙрд▓рдмреИрдХ рд░рд┐рдЯрд░реНрди рд╕рд╣реА рд╣реЛрдиреЗ рдкрд░ рдШрдЯрдХ рдХреЛ рдлрд┐рд░ рд╕реЗ рдкреНрд░рд╕реНрддреБрдд рдХрд┐рдпрд╛ рдЬрд╛рдП:
useContext(ThemeContext, (contextData => contextData.someArray.length !== 0 ));

рд╣реБрдХ рдХреЗ рд╕рд╛рде рдореБрдЦреНрдп рд╕рдорд╕реНрдпрд╛ рдЬреЛ рдореБрдЭреЗ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдорд┐рд▓реА рдереА рд╡рд╣ рдпрд╣ рд╣реИ рдХрд┐ рд╣рдо рдПрдХ рд╣реБрдХ рдХреЗ рдЕрдВрджрд░ рд╕реЗ рдкреНрд░рдмрдВрдзрди рдирд╣реАрдВ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ рдЬреЛ рдПрдХ рдШрдЯрдХ рджреНрд╡рд╛рд░рд╛ рд▓реМрдЯрд╛рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ - рдкреНрд░рддрд┐рдкрд╛рджрди рдХреЛ рд░реЛрдХрдиреЗ рдХреЗ рд▓рд┐рдП, рдпрд╛рджрдЧрд╛рд░ рдореВрд▓реНрдп рдЖрджрд┐ рд╡рд╛рдкрд╕ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдПред

рдЕрдЧрд░ рд╣рдо рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ, рддреЛ рдпрд╣ рд░рдЪрдирд╛ рдпреЛрдЧреНрдп рдирд╣реАрдВ рд╣реЛрдЧрд╛ред

https://overreacted.io/why-isnt-xa-hook/#not -a-hook-usebailout

рд╡рд┐рдХрд▓реНрдк 4: рдбреЗрдЯрд╛ рдкреНрд░рдЪрд╛рд░ рдХреЗ рд▓рд┐рдП рд╕рдВрджрд░реНрдн рдХрд╛ рдЙрдкрдпреЛрдЧ рди рдХрд░реЗрдВ рдмрд▓реНрдХрд┐ рдбреЗрдЯрд╛ рд╕рджрд╕реНрдпрддрд╛ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░реЗрдВред рдЙрдкрдпреЛрдЧ рд╕рджрд╕реНрдпрддрд╛ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░реЗрдВ (рдХреНрдпреЛрдВрдХрд┐ рд╕рднреА рдорд╛рдорд▓реЛрдВ рдХреЛ рдХрд╡рд░ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд▓рд┐рдЦрдирд╛ рдореБрд╢реНрдХрд┐рд▓ рд╣реИ)ред

рдкреБрди: рдкреНрд░рд╕реНрддреБрдд рдХрд░рдиреЗ рд╕реЗ рдмрдЪрдиреЗ рдХрд╛ рдПрдХ рдФрд░ рддрд░реАрдХрд╛ рд╣реИред
"рдЖрдкрдХреЛ JSX рдХреЛ рд░реА-рд░реЗрдВрдбрд░рд┐рдВрдЧ рдШрдЯрдХ рд╕реЗ рдПрдХ рд╕реНрддрд░ рдКрдкрд░ рд▓реЗ рдЬрд╛рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ, рдлрд┐рд░ рдЗрд╕реЗ рд╣рд░ рдмрд╛рд░ рдлрд┐рд░ рд╕реЗ рдирд╣реАрдВ рдмрдирд╛рдпрд╛ рдЬрд╛рдПрдЧрд╛"

рдЕрдзрд┐рдХ рдЬрд╛рдирдХрд╛рд░реА рдпрд╣рд╛рдБ

рд╣реЛ рд╕рдХрддрд╛ рд╣реИ рдХрд┐ рдЗрд╕рдХреЗ рд▓рд┐рдП рдПрдХ рдЕрдЪреНрдЫрд╛ рд╕рдорд╛рдзрд╛рди рдпрд╣ рд╣реЛрдЧрд╛ рдХрд┐ рд╕рдВрджрд░реНрдн рдХреЛ "рд▓реЗрдиреЗ" рдХреА рд╕рдВрднрд╛рд╡рдирд╛ рд╣реЛ рдФрд░ рдХреЗрд╡рд▓ рдХреЙрд▓рдмреИрдХ рд░рд┐рдЯрд░реНрди рд╕рд╣реА рд╣реЛрдиреЗ рдкрд░ рдШрдЯрдХ рдХреЛ рдлрд┐рд░ рд╕реЗ рдкреНрд░рд╕реНрддреБрдд рдХрд┐рдпрд╛ рдЬрд╛рдП:
useContext(ThemeContext, (contextData => contextData.someArray.length !== 0 ));

рд╣реБрдХ рдХреЗ рд╕рд╛рде рдореБрдЦреНрдп рд╕рдорд╕реНрдпрд╛ рдЬреЛ рдореБрдЭреЗ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдорд┐рд▓реА рдереА рд╡рд╣ рдпрд╣ рд╣реИ рдХрд┐ рд╣рдо рдПрдХ рд╣реБрдХ рдХреЗ рдЕрдВрджрд░ рд╕реЗ рдкреНрд░рдмрдВрдзрди рдирд╣реАрдВ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ рдЬреЛ рдПрдХ рдШрдЯрдХ рджреНрд╡рд╛рд░рд╛ рд▓реМрдЯрд╛рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ - рдкреНрд░рддрд┐рдкрд╛рджрди рдХреЛ рд░реЛрдХрдиреЗ рдХреЗ рд▓рд┐рдП, рдпрд╛рджрдЧрд╛рд░ рдореВрд▓реНрдп рдЖрджрд┐ рд╡рд╛рдкрд╕ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдПред

рдпрд╣рд╛рдВ рд╕рд╣реА/рдЧрд▓рдд рдХреЗ рдмрдЬрд╛рдп... рдХреНрдпрд╛ рд╣рдо рдПрдХ рдкрд╣рдЪрд╛рди рдЖрдзрд╛рд░рд┐рдд рдлрд╝рдВрдХреНрд╢рди рдкреНрд░рджрд╛рди рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ рдЬреЛ рд╣рдореЗрдВ рд╕рдВрджрд░реНрдн рд╕реЗ рдбреЗрдЯрд╛ рдХреЛ рд╕рдмреНрдорд┐рдЯ рдХрд░рдиреЗ рдХреА рдЕрдиреБрдорддрд┐ рджреЗрддрд╛ рд╣реИ?

const contextDataINeed = useContext(ContextObj, (state) => state['keyICareAbout'])

рдЬрд╣рд╛рдВ рдЙрдкрдпреЛрдЧ рдХреЙрдиреНрдЯреЗрдХреНрд╕реНрдЯ рдЗрд╕ рдШрдЯрдХ рдореЗрдВ рдкреЙрдк рдирд╣реАрдВ рд╣реЛрдЧрд╛ рдЬрдм рддрдХ рдХрд┐ рдЪрдпрдирдХрд░реНрддрд╛ рдПрдлрдПрди рдХрд╛ рдкрд░рд┐рдгрд╛рдо рдПрдХ рд╣реА рдлрд╝рдВрдХреНрд╢рди рдХреЗ рдкрд┐рдЫрд▓реЗ рдкрд░рд┐рдгрд╛рдо рд╕реЗ рдЕрд▓рдЧ рдкрд╣рдЪрд╛рди рдХреЗ рдЕрдиреБрд╕рд╛рд░ рдЕрд▓рдЧ рди рд╣реЛред

рдЗрд╕ рдкреБрд╕реНрддрдХрд╛рд▓рдп рдХреЛ рдорд┐рд▓рд╛ рдХрд┐ рдпрд╣ рдлреЗрд╕рдмреБрдХ рдХреЗ рд▓рд┐рдП рд╣реБрдХ рдХреЗ рд╕рд╛рде рдПрдХреАрдХреГрдд рдХрд░рдиреЗ рдХрд╛ рд╕рдорд╛рдзрд╛рди рд╣реЛ рд╕рдХрддрд╛ рд╣реИ https://blog.axlight.com/posts/super-performant-global-state-with-react-context-and-hooks/

рдкреБрди: рдкреНрд░рд╕реНрддреБрдд рдХрд░рдиреЗ рд╕реЗ рдмрдЪрдиреЗ рдХрд╛ рдПрдХ рдФрд░ рддрд░реАрдХрд╛ рд╣реИред
"рдЖрдкрдХреЛ JSX рдХреЛ рд░реА-рд░реЗрдВрдбрд░рд┐рдВрдЧ рдШрдЯрдХ рд╕реЗ рдПрдХ рд╕реНрддрд░ рдКрдкрд░ рд▓реЗ рдЬрд╛рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ, рдлрд┐рд░ рдЗрд╕реЗ рд╣рд░ рдмрд╛рд░ рдлрд┐рд░ рд╕реЗ рдирд╣реАрдВ рдмрдирд╛рдпрд╛ рдЬрд╛рдПрдЧрд╛"

рдЕрдзрд┐рдХ рдЬрд╛рдирдХрд╛рд░реА рдпрд╣рд╛рдБ

рд╕рдорд╕реНрдпрд╛ рдпрд╣ рд╣реИ рдХрд┐ рдКрдкрд░ рд╕реЗ рдиреАрдЪреЗ рддрдХ рдкреБрди: рдкреНрд░рддрд┐рдкрд╛рджрди рдХреЛ рд░реЛрдХрдиреЗ рдХреЗ рд▓рд┐рдП рдШрдЯрдХреЛрдВ рдХреЗ рдкреЗрдбрд╝ рдХрд╛ рдкреБрдирд░реНрдЧрдарди рдХрд░рдирд╛ рдорд╣рдВрдЧрд╛ рд╣реЛ рд╕рдХрддрд╛ рд╣реИред

@fuleinist рдЖрдЦрд┐рд░рдХрд╛рд░, рдпрд╣ MobX рд╕реЗ рдЕрд▓рдЧ рдирд╣реАрдВ рд╣реИ, рд╣рд╛рд▓рд╛рдВрдХрд┐ рдПрдХ рд╡рд┐рд╢рд┐рд╖реНрдЯ рдЙрдкрдпреЛрдЧ рдХреЗ рдорд╛рдорд▓реЗ рдХреЗ рд▓рд┐рдП рдмрд╣реБрдд рд╕рд░рд▓ рд╣реИред MobX рдкрд╣рд▓реЗ рд╕реЗ рд╣реА рдЗрд╕ рддрд░рд╣ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ (рдкреНрд░реЙрдХреНрд╕реА рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рднреА), рд░рд╛рдЬреНрдп рдЙрддреНрдкрд░рд┐рд╡рд░реНрддрд┐рдд рд╣реЛрддрд╛ рд╣реИ рдФрд░ рд░рд╛рдЬреНрдп рдХреЗ рд╡рд┐рд╢рд┐рд╖реНрдЯ рдмрд┐рдЯреНрд╕ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рд╡рд╛рд▓реЗ рдШрдЯрдХреЛрдВ рдХреЛ рдлрд┐рд░ рд╕реЗ рдкреНрд░рд╕реНрддреБрдд рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ, рдФрд░ рдХреБрдЫ рдирд╣реАрдВред

@gaearon рдореБрдЭреЗ рдирд╣реАрдВ рдкрддрд╛ рдХрд┐ рдореБрдЭреЗ рдХреБрдЫ рдпрд╛рдж рдЖ рд░рд╣рд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдореИрдВрдиреЗ рдЖрдкрдХреЗ рджреВрд╕рд░реЗ рдФрд░ рддреАрд╕рд░реЗ рд╡рд┐рдХрд▓реНрдкреЛрдВ рдХреА рдХреЛрд╢рд┐рд╢ рдХреА рд╣реИ рдФрд░ рд╡реЗ рд╕рд╣реА рддрд░реАрдХреЗ рд╕реЗ рдХрд╛рдо рдирд╣реАрдВ рдХрд░ рд░рд╣реЗ рд╣реИрдВред рд╕реБрдирд┐рд╢реНрдЪрд┐рдд рдирд╣реАрдВ рд╣реИ рдХрд┐ рдпрд╣ рдХреЗрд╡рд▓ рдХреНрд░реЛрдо рдПрдХреНрд╕рдЯреЗрдВрд╢рди рдмрдЧ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рд╣реИ рдпрд╛ рдЕрдиреНрдп рдкрдХрдбрд╝ рд╣реИред рдпрд╣рд╛рдБ рдореЗрд░реЗ рдлреЙрд░реНрдо рдХрд╛ рд╕рд░рд▓ рдЙрджрд╛рд╣рд░рдг рд╣реИ, рдЬрд╣рд╛рдБ рдореИрдВ рджреЛрдиреЛрдВ рдЗрдирдкреБрдЯреНрд╕ рдХреЛ рдлрд┐рд░ рд╕реЗ рдкреНрд░рд╕реНрддреБрдд рдХрд░рддрд╛ рд╣реБрдЖ рджреЗрдЦрддрд╛ рд╣реВрдБред рдХрдВрд╕реЛрд▓ рдореЗрдВ рдореИрдВ рджреЗрдЦрддрд╛ рд╣реВрдВ рдХрд┐ рдореЗрдореЛ рдЕрдкрдирд╛ рдХрд╛рдо рдХрд░ рд░рд╣рд╛ рд╣реИ рд▓реЗрдХрд┐рди рдбреЛрдо рд╣рд░ рд╕рдордп рдлрд┐рд░ рд╕реЗ рдкреНрд░рд╕реНрддреБрдд рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред рдореИрдВрдиреЗ 1000 рд╡рд╕реНрддреБрдУрдВ рдХреА рдХреЛрд╢рд┐рд╢ рдХреА рд╣реИ рдФрд░ рдЪреЗрдВрдЬ рдЗрд╡реЗрдВрдЯ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдзреАрдорд╛ рд╣реИ, рдЗрд╕рд▓рд┐рдП рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдЬреНрдЮрд╛рдкрди() рд╕рдВрджрд░реНрдн рдХреЗ рд╕рд╛рде рд╕рд╣реА рдврдВрдЧ рд╕реЗ рдХрд╛рдо рдирд╣реАрдВ рдХрд░ рд░рд╣рд╛ рд╣реИред рдХрд┐рд╕реА рднреА рд╕рд▓рд╛рд╣ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рдж:

рдпрд╣рд╛рдВ 1000 рдЖрдЗрдЯрдо/рдЯреЗрдХреНрд╕реНрдЯрдмреЙрдХреНрд╕ рдХреЗ рд╕рд╛рде рдбреЗрдореЛ рд╣реИред рд▓реЗрдХрд┐рди рдЙрд╕ рдбреЗрдореЛ рдореЗрдВ рджреЗрд╡ рдЙрдкрдХрд░рдг рдлрд┐рд░ рд╕реЗ рдкреНрд░рд╕реНрддреБрдд рдирд╣реАрдВ рдХрд░рддреЗ рд╣реИрдВред рдЗрд╕рдХрд╛ рдкрд░реАрдХреНрд╖рдг рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдЖрдкрдХреЛ рд╕реНрдерд╛рдиреАрдп рд╕реНрд░реЛрддреЛрдВ рдХреЛ рдбрд╛рдЙрдирд▓реЛрдб рдХрд░рдирд╛ рд╣реЛрдЧрд╛: https://codesandbox.io/embed/zen-firefly-d5bxk

import React, { createContext, useState, useContext, memo } from "react";

const FormContext = createContext();

const FormProvider = ({ initialValues, children }) => {
  const [values, setValues] = useState(initialValues);

  const value = {
    values,
    setValues
  };

  return <FormContext.Provider value={value}>{children}</FormContext.Provider>;
};

const TextField = memo(
  ({ name, value, setValues }) => {
    console.log(name);
    return (
      <input
        type="text"
        value={value}
        onChange={e => {
          e.persist();
          setValues(prev => ({
            ...prev,
            [name]: e.target.value
          }));
        }}
      />
    );
  },
  (prev, next) => prev.value === next.value
);

const Field = ({ name }) => {
  const { values, setValues } = useContext(FormContext);

  const value = values[name];

  return <TextField name={name} value={value} setValues={setValues} />;
};

const App = () => (
  <FormProvider initialValues={{ firstName: "Marr", lastName: "Keri" }}>
    First name: <Field name="firstName" />
    <br />
    Last name: <Field name="lastName" />
  </FormProvider>
);

export default App;

image

рджреВрд╕рд░реА рдУрд░ рд╕рдВрджрд░реНрдн рдХреЗ рдмрд┐рдирд╛ рдпрд╣ рджреГрд╖реНрдЯрд┐рдХреЛрдг рд╕рд╣реА рдврдВрдЧ рд╕реЗ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ, рдлрд┐рд░ рднреА рдбреАрдмрдЧ рдореЗрдВ рдпрд╣ рдореЗрд░реА рдЕрдкреЗрдХреНрд╖рд╛ рд╕реЗ рдзреАрдорд╛ рд╣реИ рд▓реЗрдХрд┐рди рдХрдо рд╕реЗ рдХрдо рдкреБрди: рдкреНрд░рд╕реНрддреБрдд рдХрд░рдирд╛ рдареАрдХ рд╣реИ

import React, { useState, memo } from "react";
import ReactDOM from "react-dom";

const arr = [...Array(1000).keys()];

const TextField = memo(
  ({ index, value, onChange }) => (
    <input
      type="text"
      value={value}
      onChange={e => {
        console.log(index);
        onChange(index, e.target.value);
      }}
    />
  ),
  (prev, next) => prev.value === next.value
);

const App = () => {
  const [state, setState] = useState(arr.map(x => ({ name: x })));

  const onChange = (index, value) =>
    setState(prev => {
      return prev.map((item, i) => {
        if (i === index) return { name: value };

        return item;
      });
    });

  return state.map((item, i) => (
    <div key={i}>
      <TextField index={i} value={item.name} onChange={onChange} />
    </div>
  ));
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

image

@marrkeri рдореБрдЭреЗ рдкрд╣рд▓реЗ рдХреЛрдб рд╕реНрдирд┐рдкреЗрдЯ рдореЗрдВ рдХреБрдЫ рдЧрд▓рдд рдирд╣реАрдВ рджрд┐рдЦ рд░рд╣рд╛ рд╣реИред рджреЗрд╡ рдЯреВрд▓реНрд╕ рдореЗрдВ рд╣рд╛рдЗрд▓рд╛рдЗрдЯ рдХрд┐рдпрд╛ рдЧрдпрд╛ рдШрдЯрдХ Field рд╣реИ рдЬреЛ рд╕рдВрджрд░реНрдн рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддрд╛ рд╣реИ, рди рдХрд┐ TextField рдЬреЛ рдПрдХ рдореЗрдореЛ рдШрдЯрдХ рд╣реИ рдФрд░ areEqual рдлрд╝рдВрдХреНрд╢рди рдХреЛ рд▓рд╛рдЧреВ рдХрд░рддрд╛ рд╣реИред

рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдХреЛрдбрд╕реИрдВрдбрдмреЙрдХреНрд╕ рдЙрджрд╛рд╣рд░рдг рдореЗрдВ рдкреНрд░рджрд░реНрд╢рди рд╕рдорд╕реНрдпрд╛ рд╕рдВрджрд░реНрдн рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рд╡рд╛рд▓реЗ 1000 рдШрдЯрдХреЛрдВ рд╕реЗ рдЖрддреА рд╣реИред рд╕рдВрджрд░реНрдн рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рд╡рд╛рд▓реЗ рдПрдХ рдШрдЯрдХ рдХреЗ рд▓рд┐рдП рдЗрд╕реЗ рджреЛрдмрд╛рд░рд╛ рджреЛрд╣рд░рд╛рдПрдВ, Fields рдХрд╣реЗрдВ, рдФрд░ рдЙрд╕ рдШрдЯрдХ (рдорд╛рдирдЪрд┐рддреНрд░ рдХреЗ рд╕рд╛рде) рд╕реЗ рдкреНрд░рддреНрдпреЗрдХ рдорд╛рди рдХреЗ рд▓рд┐рдП TextField ред

@marrkeri рдореБрдЭреЗ рдкрд╣рд▓реЗ рдХреЛрдб рд╕реНрдирд┐рдкреЗрдЯ рдореЗрдВ рдХреБрдЫ рдЧрд▓рдд рдирд╣реАрдВ рджрд┐рдЦ рд░рд╣рд╛ рд╣реИред рджреЗрд╡ рдЯреВрд▓реНрд╕ рдореЗрдВ рд╣рд╛рдЗрд▓рд╛рдЗрдЯ рдХрд┐рдпрд╛ рдЧрдпрд╛ рдШрдЯрдХ Field рд╣реИ рдЬреЛ рд╕рдВрджрд░реНрдн рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддрд╛ рд╣реИ, рди рдХрд┐ TextField рдЬреЛ рдПрдХ рдореЗрдореЛ рдШрдЯрдХ рд╣реИ рдФрд░ areEqual рдлрд╝рдВрдХреНрд╢рди рдХреЛ рд▓рд╛рдЧреВ рдХрд░рддрд╛ рд╣реИред

рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдХреЛрдбрд╕реИрдВрдбрдмреЙрдХреНрд╕ рдЙрджрд╛рд╣рд░рдг рдореЗрдВ рдкреНрд░рджрд░реНрд╢рди рд╕рдорд╕реНрдпрд╛ рд╕рдВрджрд░реНрдн рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рд╡рд╛рд▓реЗ 1000 рдШрдЯрдХреЛрдВ рд╕реЗ рдЖрддреА рд╣реИред рд╕рдВрджрд░реНрдн рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рд╡рд╛рд▓реЗ рдПрдХ рдШрдЯрдХ рдХреЗ рд▓рд┐рдП рдЗрд╕реЗ рджреЛрдмрд╛рд░рд╛ рджреЛрд╣рд░рд╛рдПрдВ, Fields рдХрд╣реЗрдВ, рдФрд░ рдЙрд╕ рдШрдЯрдХ (рдорд╛рдирдЪрд┐рддреНрд░ рдХреЗ рд╕рд╛рде) рд╕реЗ рдкреНрд░рддреНрдпреЗрдХ рдорд╛рди рдХреЗ рд▓рд┐рдП TextField ред

рдЬреИрд╕рд╛ рдХрд┐ рдЖрдкрдиреЗ рдХрд╣рд╛ рдерд╛ рдХрд┐ рдореИрдВ рдЙрд╕реА рд╕реЛрдЪ рдореЗрдВ рдерд╛ рдХрд┐ рд╣рд░ рдмрд╛рд░ рдлрд┐рд░ рд╕реЗ рдкреНрд░рд╕реНрддреБрдд рдХрд┐рдпрд╛ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдП рд▓реЗрдХрд┐рди ( ) рдХреЗрд╡рд▓ рдЬрдм рдореВрд▓реНрдп рдмрджрд▓ рдЬрд╛рддрд╛ рд╣реИред рд▓реЗрдХрд┐рди рдпрд╣ рд╢рд╛рдпрдж рд╕рд┐рд░реНрдл рджреЗрд╡ рдЙрдкрдХрд░рдг рдХреА рд╕рдорд╕реНрдпрд╛ рд╣реИ рдХреНрдпреЛрдВрдХрд┐ рдореИрдВрдиреЗ рдЪрд╛рд░реЛрдВ рдУрд░ рдкреИрдбрд┐рдВрдЧ рдЬреЛрдбрд╝ рджреА рд╣реИ рдФрд░ рдЗрд╕рдХреЗ рдмрдЬрд╛рдп рдкреБрди: рдкреНрд░рд╕реНрддреБрдд рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред рдЗрд╕ рддрд╕реНрд╡реАрд░ рдХреЛ рджреЗрдЦреЗрдВ
image

image

рдореИрдВрдиреЗ рдПрдХ рдШрдЯрдХ рдХреЛ рд░рд┐рдлреИрдХреНрдЯрд░рд┐рдВрдЧ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдЖрдкрдХрд╛ рджреВрд╕рд░рд╛ рдмрд┐рдВрджреБ рдирд╣реАрдВ рдкрдХрдбрд╝рд╛ рд╣реИ . рдХреНрдпрд╛ рдЖрдк рд╕реНрдиреИрдкрд╢реЙрдЯ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ pls? рдФрд░ рдЖрдк рд▓реЛрдЧ рдЕрдзрд┐рдХрддрдо рдкреНрд░рджрд░реНрд╢рд┐рдд рд╕рдВрдЦреНрдпрд╛ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдХреНрдпрд╛ рд╕реЛрдЪрддреЗ рд╣реИрдВ рдЬреЛ рдмрд┐рдирд╛ рд▓реИрдЧрд┐рдВрдЧ рдХреЗ рдареАрдХ рд╣реИрдВ? 1000 рд╕реЗ рдЬреНрдпрд╛рджрд╛ рд╣реИ?

@marrkeri рдореИрдВ рдХреБрдЫ рдЗрд╕ рддрд░рд╣ рдХрд╛ рд╕реБрдЭрд╛рд╡ рджреЗ рд░рд╣рд╛ рдерд╛: https://codesandbox.io/s/little-night-p985yред

рдХреНрдпрд╛ рдпрд╣реА рдХрд╛рд░рдг рд╣реИ рдХрд┐ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛-рд░рд┐рдбрдХреНрд╕ рдХреЛ рд╕реНрдерд┐рд░ рд╕рдВрджрд░реНрдн рдПрдкреАрдЖрдИ рдХреЗ рд▓рд╛рднреЛрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛ рдмрдВрдж рдХрд░рдирд╛ рдкрдбрд╝рд╛ рдФрд░ рдЬрдм рд╡реЗ рд╣реБрдХ рдореЗрдВ рдЪрд▓реЗ рдЧрдП рддреЛ рд╡рд░реНрддрдорд╛рди рд╕реНрдерд┐рддрд┐ рдХреЛ рд╕рдВрджрд░реНрдн рдореЗрдВ рдкрд╛рд░рд┐рдд рдХрд░ рджрд┐рдпрд╛?

рддреЛ рдРрд╕рд╛ рд▓рдЧрддрд╛ рд╣реИ

рд╡рд┐рдХрд▓реНрдк 4: рдПрдХ рд╕рджрд╕реНрдпрддрд╛ рдлрд╝рдВрдХреНрд╢рди рдХреЛ рд╕рдВрджрд░реНрдн рдорд╛рди рдХреЗ рд░реВрдк рдореЗрдВ рдкрд╛рд╕ рдХрд░реЗрдВ, рдареАрдХ рдЙрд╕реА рддрд░рд╣ рдЬреИрд╕реЗ рдХрд┐ рд╡рд┐рд░рд╛рд╕рдд рд╕рдВрджрд░реНрдн рдпреБрдЧ рдореЗрдВ рд╣реЛрддрд╛ рд╣реИ

рдпрд╣ рдПрдХрдорд╛рддреНрд░ рд╡рд┐рдХрд▓реНрдк рд╣реЛ рд╕рдХрддрд╛ рд╣реИ рдпрджрд┐ рдЖрдк рдЙрдкрдпреЛрдЧреЛрдВ рдХреЛ рдирд┐рдпрдВрддреНрд░рд┐рдд рдирд╣реАрдВ рдХрд░рддреЗ рд╣реИрдВ (рд╡рд┐рдХрд▓реНрдк 2-3 рдХреЗ рд▓рд┐рдП рдЖрд╡рд╢реНрдпрдХ) рдФрд░ рд╕рднреА рд╕рдВрднрд╛рд╡рд┐рдд рдЪрдпрдирдХрд░реНрддрд╛рдУрдВ (рд╡рд┐рдХрд▓реНрдк 1 рдХреЗ рд▓рд┐рдП рдЖрд╡рд╢реНрдпрдХ) рдХреА рдЧрдгрдирд╛ рдирд╣реАрдВ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ, рд▓реЗрдХрд┐рди рдлрд┐рд░ рднреА рдПрдХ рд╣реБрдХ рдПрдкреАрдЖрдИ рдХрд╛ рдкрд░реНрджрд╛рдлрд╛рд╢ рдХрд░рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ

const MyContext = createContext()
export const Provider = ({children}) => (
  <MyContext.provider value={{subscribe: listener => ..., getValue: () => ...}}>
    {children}
  </MyContext.provider>
)

export const useSelector = (selector, equalityFunction = (a, b) => a === b) => {
  const {subscribe, getValue} = useContext(MyContext)
  const [value, setValue] = useState(getValue())
  useEffect(() => subscribe(state => {
      const newValue = selector(state)
      if (!equalityFunction(newValue, value) {
        setValue(newValue)
      }
  }), [selector, equalityFunction])
}

@Hypnosphi : рд╣рдордиреЗ рд╕реНрдЯреЛрд░ рд╕реНрдерд┐рддрд┐ рдХреЛ рд╕рдВрджрд░реНрдн (v6 рдХрд╛рд░реНрдпрд╛рдиреНрд╡рдпрди) рдореЗрдВ рдкрд╛рд╕ рдХрд░рдирд╛ рдмрдВрдж рдХрд░ рджрд┐рдпрд╛ рдФрд░ рдкреНрд░рджрд░реНрд╢рди рд╕рдорд╕реНрдпрд╛рдУрдВ рдХреЗ рд╕рдВрдпреЛрдЬрди рдФрд░ рд╕рдВрджрд░реНрдн рдХреЗ рдХрд╛рд░рдг рдЕрдкрдбреЗрдЯ рд╕реЗ рдмрд╛рд╣рд░ рдирд┐рдХрд▓рдиреЗ рдореЗрдВ рдЕрд╕рдорд░реНрдерддрд╛ рдХреЗ рдХрд╛рд░рдг рд╕реАрдзреЗ рд╕реНрдЯреЛрд░ рд╕рдмреНрд╕рдХреНрд░рд┐рдкреНрд╢рди (v7 рдХрд╛рд░реНрдпрд╛рдиреНрд╡рдпрди) рдкрд░ рд╡рд╛рдкрд╕ рд╕реНрд╡рд┐рдЪ рдХрд┐рдпрд╛ (рдЬрд┐рд╕рдиреЗ рдЗрд╕реЗ рдмрдирд╛рдпрд╛ v6 рджреГрд╖реНрдЯрд┐рдХреЛрдг рдХреЗ рдЖрдзрд╛рд░ рдкрд░ рд░рд┐рдПрдХреНрдЯ-рд░реЗрдбрдХреНрд╕ рд╣реБрдХ рдПрдкреАрдЖрдИ рдмрдирд╛рдирд╛ рдЕрд╕рдВрднрд╡ рд╣реИ)ред

рдЕрдзрд┐рдХ рдЬрд╛рдирдХрд╛рд░реА рдХреЗ рд▓рд┐рдП, рдореЗрд░реА рдкреЛрд╕реНрдЯ рдж рд╣рд┐рд╕реНрдЯреНрд░реА рдПрдВрдб рдЗрдореНрдкреНрд▓реАрдореЗрдВрдЯреЗрд╢рди рдСрдлрд╝ рд░рд┐рдПрдХреНрдЯ-рд░реЗрдбрдХреНрд╕ рджреЗрдЦреЗрдВ ред

рдореИрдВрдиреЗ рдзрд╛рдЧреЗ рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ рдкрдврд╝рд╛ рд▓реЗрдХрд┐рди рдореИрдВ рдЕрднреА рднреА рд╕реЛрдЪ рд░рд╣рд╛ рд╣реВрдВ - рдХреНрдпрд╛ рд╕рдВрджрд░реНрдн рдкрд░рд┐рд╡рд░реНрддрди рдкрд░ рд╕рд╢рд░реНрдд рд░реВрдк рд╕реЗ рдкреБрди: рдкреНрд░рд╕реНрддреБрдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдЖрдЬ рдПрдХрдорд╛рддреНрд░ рд╡рд┐рдХрд▓реНрдк рдЙрдкрд▓рдмреНрдз рд╣реИрдВ, "рд╡рд┐рдХрд▓реНрдк 1 2 3 4" рдКрдкрд░ рд╕реВрдЪреАрдмрджреНрдз рд╣реИ? рдХреНрдпрд╛ рдЖрдзрд┐рдХрд╛рд░рд┐рдХ рддреМрд░ рдкрд░ рдЗрд╕реЗ рд╕рдВрдмреЛрдзрд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдХрд╛рдо рдореЗрдВ рдХреБрдЫ рдФрд░ рд╣реИ рдпрд╛ "4 рд╕рдорд╛рдзрд╛рди" рдкрд░реНрдпрд╛рдкреНрдд рд╕реНрд╡реАрдХрд╛рд░реНрдп рдорд╛рдиреЗ рдЬрд╛рддреЗ рд╣реИрдВ?

рдореИрдВрдиреЗ рджреВрд╕рд░реЗ рд╕реВрддреНрд░ рдореЗрдВ рд▓рд┐рдЦрд╛ рд╣реИ, рд▓реЗрдХрд┐рди рд╕рд┐рд░реНрдл рдорд╛рдорд▓реЗ рдореЗрдВред рдпрд╣рд╛рдВ рдПрдХ _рдЕрдиреМрдкрдЪрд╛рд░рд┐рдХ_ рд╕рдорд╛рдзрд╛рди рджрд┐рдпрд╛ рдЧрдпрд╛ рд╣реИред
рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛рд▓реИрдВрдб рдореЗрдВ рдЙрдкрдпреЛрдЧ рдХреЙрдиреНрдЯреЗрдХреНрд╕реНрдЯ рдЪрдпрдирдХрд░реНрддрд╛ рдкреНрд░рд╕реНрддрд╛рд╡ рдФрд░

рдИрдорд╛рдирджрд╛рд░реА рд╕реЗ, рдЗрд╕рд╕реЗ рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдврд╛рдВрдЪрд╛ рдкреВрд░реА рддрд░рд╣ рд╕реЗ рдХрд╛рд░реНрдпреЛрдВ рдФрд░ рд╣реБрдХ рдореЗрдВ рдЬрд╛рдиреЗ рдХреЗ рд▓рд┐рдП рддреИрдпрд╛рд░ рдирд╣реАрдВ рд╣реИ рдЬреИрд╕реЗ рд╣рдореЗрдВ рдкреНрд░реЛрддреНрд╕рд╛рд╣рд┐рдд рдХрд┐рдпрд╛ рдЬрд╛ рд░рд╣рд╛ рд╣реИред рдХрдХреНрд╖рд╛рдУрдВ рдФрд░ рдЬреАрд╡рдирдЪрдХреНрд░ рд╡рд┐рдзрд┐рдпреЛрдВ рдХреЗ рд╕рд╛рде рдЖрдкрдХреЗ рдкрд╛рд╕ рдЗрди рдЪреАрдЬреЛрдВ рдХреЛ рдирд┐рдпрдВрддреНрд░рд┐рдд рдХрд░рдиреЗ рдХрд╛ рдПрдХ рдЕрдЪреНрдЫрд╛ рддрд░реАрдХрд╛ рдерд╛ рдФрд░ рдЕрдм рд╣реБрдХ рдХреЗ рд╕рд╛рде рдпрд╣ рдмрд╣реБрдд рдЦрд░рд╛рдм рдХрдо рдкрдардиреАрдп рд╡рд╛рдХреНрдпрд╡рд┐рдиреНрдпрд╛рд╕ рд╣реИ

рд╡рд┐рдХрд▓реНрдк 3 рдХрд╛рдо рдирд╣реАрдВ рдХрд░ рд░рд╣рд╛ рд╣реИред рдХреНрдпрд╛ рдореИрдВ рдЧрд▓рдд рд╣реВрдВ? https://stackblitz.com/edit/react-w8gr8z

@ рдорд╛рд░реНрдЯрд┐рди , рдореИрдВ рдЗрд╕рд╕реЗ рд╕рд╣рдордд рдирд╣реАрдВ рд╣реВрдВред

рд╣реБрдХ рдкреИрдЯрд░реНрди рдХреЛ рд╕реБрд╡реНрдпрд╡рд╕реНрдерд┐рдд рдкреНрд░рд▓реЗрдЦрди рдФрд░ рдХреЛрдб рдХреЗ рд╕рд╛рде рдкрдврд╝рд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИ
рд╕рдВрд░рдЪрдирд╛ рдФрд░ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рд╡рд░реНрдЧ рдФрд░ рдЬреАрд╡рдирдЪрдХреНрд░ рд╕рднреА рдХрд╛рд░реНрдпрд╛рддреНрдордХ рджреНрд╡рд╛рд░рд╛ рдмрджрд▓реА рдЬрд╛ рд╕рдХрддреЗ рд╣реИрдВ
рд╕рдордХрдХреНрд╖ рд╡рд╛рд▓реЗред

рджреБрд░реНрднрд╛рдЧреНрдп рд╕реЗ, рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛рд╢реАрд▓ рдкреИрдЯрд░реНрди рдХреЛ рд░рд┐рдПрдХреНрдЯ рджреНрд╡рд╛рд░рд╛ рдкреНрд░рд╛рдкреНрдд рдирд╣реАрдВ рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИ
рдпрд╛ рддреЛ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рд╡рд░реНрдЧ рдпрд╛ рд╣реБрдХред

рд╢рдирд┐рд╡рд╛рд░, 11 рдЬрдирд╡рд░реА, 2020 рдХреЛ рд╕реБрдмрд╣ 9:44 рдмрдЬреЗ рдорд╛рд░реНрдЯрд┐рди рдЬреЗрдиреЗрд╡ рдиреЛрдЯрд┐рдлрд┐рдХреЗрд╢рди @github.com
рд▓рд┐рдЦрд╛ рдерд╛:

рдИрдорд╛рдирджрд╛рд░реА рд╕реЗ, рдЗрд╕рд╕реЗ рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдврд╛рдВрдЪрд╛ рдЕрднреА рдЬрд╛рдиреЗ рдХреЗ рд▓рд┐рдП рддреИрдпрд╛рд░ рдирд╣реАрдВ рд╣реИ
рдкреВрд░реА рддрд░рд╣ рд╕реЗ рдХрд╛рд░реНрдпреЛрдВ рдФрд░ рд╣реБрдХ рдореЗрдВ рдЬреИрд╕реЗ рд╣рдореЗрдВ рдкреНрд░реЛрддреНрд╕рд╛рд╣рд┐рдд рдХрд┐рдпрд╛ рдЬрд╛ рд░рд╣рд╛ рд╣реИред рдХрдХреНрд╖рд╛рдУрдВ рдХреЗ рд╕рд╛рде
рдФрд░ рдЬреАрд╡рдирдЪрдХреНрд░ рдХреЗ рддрд░реАрдХреЗ рдЖрдкрдХреЗ рдкрд╛рд╕ рдЗрди рдЪреАрдЬреЛрдВ рдХреЛ рдирд┐рдпрдВрддреНрд░рд┐рдд рдХрд░рдиреЗ рдХрд╛ рдПрдХ рдЕрдЪреНрдЫрд╛ рддрд░реАрдХрд╛ рдерд╛ рдФрд░
рдЕрдм рд╣реБрдХ рдХреЗ рд╕рд╛рде рдпрд╣ рдмрд╣реБрдд рдЦрд░рд╛рдм рдХрдо рдкрдардиреАрдп рд╡рд╛рдХреНрдпрд╡рд┐рдиреНрдпрд╛рд╕ рд╣реИ

-
рдЖрдк рдЗрд╕реЗ рдкреНрд░рд╛рдкреНрдд рдХрд░ рд░рд╣реЗ рд╣реИрдВ рдХреНрдпреЛрдВрдХрд┐ рдЖрдкрдХрд╛ рдЙрд▓реНрд▓реЗрдЦ рдХрд┐рдпрд╛ рдЧрдпрд╛ рдерд╛ред
рдЗрд╕ рдИрдореЗрд▓ рдХрд╛ рд╕реАрдзреЗ рдЙрддреНрддрд░ рджреЗрдВ, рдЗрд╕реЗ GitHub рдкрд░ рджреЗрдЦреЗрдВ
https://github.com/facebook/react/issues/15156?email_source=notifications&email_token=AAI4DWUJ7WUXMHAR6F2KVXTQ5D25TA5CNFSM4G7UEEO2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63#IZ5EGOIVN5732TOR
рдпрд╛ рд╕рджрд╕реНрдпрддрд╛ рд╕рдорд╛рдкреНрдд рдХрд░реЗрдВ
https://github.com/notifications/unsubscribe-auth/AAI4DWUCO7ORHV5OSDCE35TQ5D25TANCNFSM4G7UEEOQ
.

@mgenev Option 3 рдмрдЪреНрдЪреЗ рдХреЛ рдлрд┐рд░ рд╕реЗ рдкреНрд░рд╕реНрддреБрдд рдХрд░рдиреЗ рд╕реЗ рд░реЛрдХрддрд╛ рд╣реИ ( <ExpensiveTree /> , name рдЦреБрдж рдХреЗ рд▓рд┐рдП рдмреЛрд▓рддрд╛ рд╣реИ)

@Hypnosphi рдзрдиреНрдпрд╡рд╛рдж, рдпрд╣ рд╕рд╣реА рдерд╛ред
https://stackblitz.com/edit/react-ycfyye

рдореИрдВрдиреЗ рдлрд┐рд░ рд╕реЗ рд▓рд┐рдЦрд╛ рдФрд░ рдЕрдм рд╡рд╛рд╕реНрддрд╡рд┐рдХ рдкреНрд░рддрд┐рдкрд╛рджрди (рдкреНрд░рджрд░реНрд╢рди) рдШрдЯрдХ рдлрд┐рд░ рд╕реЗ рдкреНрд░рд╕реНрддреБрдд рдирд╣реАрдВ рдХрд░рддреЗ рд╣реИрдВ, рд▓реЗрдХрд┐рди рд╕рднреА рдХрдВрдЯреЗрдирд░ (рд╕рдВрджрд░реНрдн рдЬреБрдбрд╝реЗ) рд╕рдВрджрд░реНрдн рдкрд░ рдкреНрд░реЛрдк рдХреЗ рдХрд┐рд╕реА рднреА рдкрд░рд┐рд╡рд░реНрддрди рдкрд░ рдкреНрд░рд╕реНрддреБрдд рдХрд░рддреЗ рд╣реИрдВ, рдЗрд╕рд╕реЗ рдХреЛрдИ рдлрд░реНрдХ рдирд╣реАрдВ рдкрдбрд╝рддрд╛ рдХрд┐ рдпрд╣ рдЙрдирдореЗрдВ рдЙрдкрдпреЛрдЧ рдореЗрдВ рд╣реИред рдЕрдм рдПрдХрдорд╛рддреНрд░ рд╡рд┐рдХрд▓реНрдк рдЬреЛ рдореИрдВ рджреЗрдЦ рд╕рдХрддрд╛ рд╣реВрдВ рд╡рд╣ рд╕рдВрджрд░реНрднреЛрдВ рдХреЛ рд╡рд┐рднрд╛рдЬрд┐рдд рдХрд░рдирд╛ рд╢реБрд░реВ рдХрд░рдирд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдХреБрдЫ рдЪреАрдЬреЗрдВ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рд╡реИрд╢реНрд╡рд┐рдХ рд╣реИрдВ рдФрд░ рдЙрдЪреНрдЪрддрдо рд╕реНрддрд░ рдкрд░ рд▓рдкреЗрдЯрддреА рд╣реИрдВ рдФрд░ рдЙрдирдореЗрдВ рдХрд┐рд╕реА рднреА рдкреНрд░реЛрдк рдкрд░ рдмрджрд▓рд╛рд╡ рд╕реЗ рд╕рднреА рдХрдВрдЯреЗрдирд░ рдкреВрд░реЗ рдРрдк рдореЗрдВ рдЖрдЧ рд▓рдЧ рдЬрд╛рдПрдВрдЧреЗ, рдореИрдВ рдирд╣реАрдВ ' рд╕рдордЭ рдореЗрдВ рдирд╣реАрдВ рдЖрддрд╛ рдХрд┐ рдпрд╣ рдкреНрд░рджрд░реНрд╢рди рдХреЗ рд▓рд┐рдП рдХреИрд╕реЗ рдЕрдЪреНрдЫрд╛ рд╣реЛ рд╕рдХрддрд╛ рд╣реИ ...

рдХреНрдпрд╛ рдХреЛрдИ рдЕрдЪреНрдЫрд╛ рдЙрджрд╛рд╣рд░рдг рд╣реИ рдХрд┐ рдЗрд╕реЗ рдПрдХ рдкреНрд░рджрд░реНрд╢рдирдХрд╛рд░реА рддрд░реАрдХреЗ рд╕реЗ рдХреИрд╕реЗ рдХрд┐рдпрд╛ рдЬрд╛рдП? рдЖрдзрд┐рдХрд╛рд░рд┐рдХ рджрд╕реНрддрд╛рд╡реЗрдЬрд╝ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рд╕реАрдорд┐рдд рд╣реИрдВ

рдЖрдк рдореЗрд░реЗ рд╡рд┐рдХрд▓реНрдк 4 рдХреЛ рдЖрдЬрдорд╛ рд╕рдХрддреЗ рд╣реИрдВ, рдЬреЛ рдореВрд▓ рд░реВрдк рд╕реЗ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛-рд░реЗрдбрдХреНрд╕ рдЖрдВрддрд░рд┐рдХ рд░реВрдк рд╕реЗ рдХрд░рддрд╛ рд╣реИ
https://github.com/facebook/react/issues/15156#issuecomment -546703046

subscribe рдлрд╝рдВрдХреНрд╢рди рдХреЛ рд▓рд╛рдЧреВ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП, рдЖрдк рдСрдмреНрдЬрд░реНрд╡реЗрдмрд▓реНрд╕ рдпрд╛ EventEmitter рдЬреИрд╕реА рдХрд┐рд╕реА рдЪреАрдЬрд╝ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ, рдпрд╛ рдХреЗрд╡рд▓ рдПрдХ рдореВрд▓ рд╕рджрд╕реНрдпрддрд╛ рддрд░реНрдХ рд╕реНрд╡рдпрдВ рд▓рд┐рдЦ рд╕рдХрддреЗ рд╣реИрдВ:

function StateProvider({children}) {
  const [state, dispatch] = useReducer(reducer, initialState)
  const listeners = useRef([])
  const subscribe = listener => {
    listeners.current.push(listener)
  }
  useEffect(() => {
    listeners.current.forEach(listener => listener(state)
  }, [state])

  return (
    <DispatchContext.Provider value={dispatch}>
      <SubscribeContext.Provider value={{subscribe, getValue: () => state}}>
          {children}      
      </SubscribeContext.Provider>
    </DispatchContext.Provider>
  );
}

рдЬрд┐рди рд▓реЛрдЧреЛрдВ рдХреА рд░реБрдЪрд┐ рд╣реЛ рд╕рдХрддреА рд╣реИ, рдЙрдирдХреЗ рд▓рд┐рдП рдпрд╣рд╛рдВ рдЗрд╕ рд╡рд┐рд╖рдп рд╕реЗ рд╕рдВрдмрдВрдзрд┐рдд рд╡рд┐рднрд┐рдиреНрди рдкреБрд╕реНрддрдХрд╛рд▓рдпреЛрдВ рдХреА рддреБрд▓рдирд╛ рд╣реИред
https://github.com/dai-shi/will-this-react-global-state-work-in-concurrent-mode

рдореЗрд░рд╛ рдирд╡реАрдирддрдо рдкреНрд░рдпрд╛рд╕ useTransition рд╕рд╛рде рд░рд╛рдЬреНрдп рд╢рд╛рдЦрд╛рдУрдВ рдХреЗ рд╕рдорд░реНрдерди рдХреА рдЬрд╛рдВрдЪ рдХрд░рдирд╛ рд╣реИ рдЬреЛ рдЖрдЧрд╛рдореА рд╕рдорд╡рд░реНрддреА рдореЛрдб рдореЗрдВ рдорд╣рддреНрд╡рдкреВрд░реНрдг рд╣реЛрдЧрд╛ред
рдореВрд▓ рд░реВрдк рд╕реЗ, рдпрджрд┐ рд╣рдо рд╕рд╛рдорд╛рдиреНрдп рддрд░реАрдХреЗ рд╕реЗ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рд╕реНрдерд┐рддрд┐ рдФрд░ рд╕рдВрджрд░реНрдн рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╣реИрдВ, рддреЛ рдпрд╣ рдареАрдХ рд╣реИред (рдЕрдиреНрдпрдерд╛, рд╣рдореЗрдВ рдПрдХ рддрд░рдХреАрдм рдЪрд╛рд╣рд┐рдП, рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП, рдпрд╣ ред)

рдзрдиреНрдпрд╡рд╛рдж @ рджрд╛рдИ-рд╢рд┐ рдореБрдЭреЗ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдЖрдкрдХреЗ рдкреИрдХреЗрдЬ рдкрд╕рдВрдж рд╣реИрдВ рдФрд░ рдореИрдВ рдЙрдиреНрд╣реЗрдВ рдЕрдкрдирд╛рдиреЗ рдкрд░ рд╡рд┐рдЪрд╛рд░ рдХрд░ рд░рд╣рд╛ рд╣реВрдВред

@ рджрд╛рдИ-рд╢рд┐ рд╣рд╛рдп, рдореБрдЭреЗ рдЕрднреА рдЖрдкрдХрд╛ react-tracked lib рдорд┐рд▓рд╛ рд╣реИ рдФрд░ рдпрд╣ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдЕрдЪреНрдЫрд╛ рджрд┐рдЦрддрд╛ рд╣реИ рдпрджрд┐ рдпрд╣ рд╕рдВрджрд░реНрднреЛрдВ рдХреЗ рд╕рд╛рде рдкреНрд░рджрд░реНрд╢рди рд╕рдорд╕реНрдпрд╛рдУрдВ рдХреЛ рд╣рд▓ рдХрд░рддрд╛ рд╣реИ рдЬреИрд╕рд╛ рдХрд┐ рдпрд╣ рд╡рд╛рджрд╛ рдХрд░рддрд╛ рд╣реИред рдХреНрдпрд╛ рдпрд╣ рдЕрднреА рднреА рд╡рд╛рд╕реНрддрд╡рд┐рдХ рд╣реИ рдпрд╛ рдХрд┐рд╕реА рдФрд░ рдЪреАрдЬрд╝ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛ рдмреЗрд╣рддрд░ рд╣реИ? рдпрд╣рд╛рдВ рдореБрдЭреЗ рдЗрд╕рдХреЗ рдЙрдкрдпреЛрдЧ рдХрд╛ рдЕрдЪреНрдЫрд╛ рдЙрджрд╛рд╣рд░рдг рджрд┐рдЦрд╛рдИ рджреЗрддрд╛ рд╣реИ, рдпрд╣ рджрд┐рдЦрд╛рддрд╛ рд╣реИ рдХрд┐ use-reducer-async рд╕рд╛рде рдорд┐рдбрд▓рд╡реЗрдпрд░ рд╕реНрддрд░ рдХреИрд╕реЗ рдмрдирд╛рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ https://github.com/dai-shi/react-tracked/blob/master/examples/12_async/src/store .ts рдЗрд╕рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рджред рд╡рд░реНрддрдорд╛рди рдореЗрдВ рдореИрдВрдиреЗ useReducer рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдХреБрдЫ рдРрд╕рд╛ рд╣реА рдХрд┐рдпрд╛ рд╣реИ, dispatch рдХреЛ рдПрд╕рд┐рдВрдХ рдорд┐рдбрд▓рд╡реЗрдпрд░ рдХреЗ рд▓рд┐рдП рдЕрдкрдиреЗ рд╕реНрд╡рдпрдВ рдХреЗ рд╕рд╛рде рд▓рдкреЗрдЯрдХрд░ рдФрд░ Context рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣рд╛ рд╣реВрдВ рд▓реЗрдХрд┐рди рд╕рдВрджрд░реНрднреЛрдВ рдХреЗ рд░реИрдкрд┐рдВрдЧ рдХреЗ рдХрд╛рд░рдг рднрд╡рд┐рд╖реНрдп рдореЗрдВ рдкреНрд░рддрд┐рдкрд╛рджрди рдкреНрд░рджрд░реНрд╢рди рд╕рдорд╕реНрдпрд╛рдУрдВ рдХреЗ рд▓рд┐рдП рдЪрд┐рдВрддрд╛ рдХрд░ рд░рд╣рд╛ рд╣реВрдВред

@bobrosoft react-tracked рдмрд╣реБрдд рд╕реНрдерд┐рд░ рд╣реИ, рдореИрдВ рдХрд╣реВрдВрдЧрд╛ (рдирд┐рд╢реНрдЪрд┐рдд рд░реВрдк рд╕реЗ рдПрдХ рдбреЗрд╡рд▓рдкрд░ рдЙрддреНрдкрд╛рдж рдХреЗ рд░реВрдк рдореЗрдВ)ред рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдХрд╛ рдмрд╣реБрдд рд╕реНрд╡рд╛рдЧрдд рд╣реИ рдФрд░ рдЗрд╕ рддрд░рд╣ рдПрдХ рдкреБрд╕реНрддрдХрд╛рд▓рдп рдореЗрдВ рд╕реБрдзрд╛рд░ рд╣реЛрдЧрд╛ред рд╡рд░реНрддрдорд╛рди рдореЗрдВ, рдпрд╣ рдЖрдВрддрд░рд┐рдХ рд░реВрдк рд╕реЗ рд░рд┐рдПрдХреНрдЯ рдХреА рдПрдХ рдЕрдирд┐рд░реНрджрд┐рд╖реНрдЯ рд╕реБрд╡рд┐рдзрд╛ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддрд╛ рд╣реИ, рдФрд░ рдореБрдЭреЗ рдЖрд╢рд╛ рд╣реИ рдХрд┐ рд╣рдо рдЗрд╕реЗ рднрд╡рд┐рд╖реНрдп рдореЗрдВ рдПрдХ рдмреЗрд╣рддрд░ рдЖрджрд┐рдо рдХреЗ рд╕рд╛рде рдмрджрд▓рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рд╣реЛрдВрдЧреЗред use-reducer-async рд▓рдЧрднрдЧ рдПрдХ рд╕рд╛рдзрд╛рд░рдг рд╕рд┐рдВрдЯреИрдХреНрд╕ рдЪреАрдиреА рдХреА рддрд░рд╣ рд╣реИ рдЬреЛ рдХрднреА рдЧрд▓рдд рдирд╣реАрдВ рд╣реЛрдЧрд╛ред

рдЗрд╕ рдПрдЪрдУрд╕реА рдиреЗ рдореЗрд░реЗ рд▓рд┐рдП рдХрд╛рдо рдХрд┐рдпрд╛:
````
'рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛' рд╕реЗ рдЖрдпрд╛рдд рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛, {useMemo, ReactElement, FC};
'рд▓реЙрд╢/рдХрдо' рд╕реЗ рдЖрдпрд╛рдд рдХрдо рдХрд░реЗрдВ;

рдкреНрд░рдХрд╛рд░ рдЪрдпрдирдХрд░реНрддрд╛ = (рд╕рдВрджрд░реНрдн: рдХреЛрдИ рднреА) => рдХреЛрдИ рднреА;

рдЗрдВрдЯрд░рдлрд╝реЗрд╕ рдЪрдпрдирдХрд░реНрддрд╛рдСрдмреНрдЬреЗрдХреНрдЯ {
}

рдХреЙрдиреНрдЯреЗрдХреНрд╕реНрдЯ рдХреЗ рд╕рд╛рде рдХреЙрдиреНрд╕реНрдЯ = (
рдШрдЯрдХ: рдПрдлрд╕реА,
рдкреНрд░рд╕рдВрдЧ: рдХреЛрдИ рднреА,
рдЪрдпрдирдХрд░реНрддрд╛: рдЪрдпрдирдХрд░реНрддрд╛рдСрдмреНрдЬреЗрдХреНрдЯ,
): рдПрдлрд╕реА => {
рд╡рд╛рдкрд╕реА (рдкреНрд░реЙрдкреНрд╕: рдХреЛрдИ рднреА): ReactElement => {
const рдЙрдкрднреЛрдХреНрддрд╛ = ({рд╕рдВрджрд░реНрдн}: рдХреЛрдИ рднреА): ReactElement => {
рдХреЙрдиреНрд╕реНрдЯ рд╕рдВрджрд░реНрднрдкреНрд░реЙрдкреНрд╕ = рдХрдо рдХрд░реЗрдВ (
рдЪрдпрдирдХрд░реНрддрд╛,
(рдПрд╕реАрд╕реА: рдХреЛрдИ, рдЪрдпрдирдХрд░реНрддрд╛: рдЪрдпрдирдХрд░реНрддрд╛, рдХреБрдВрдЬреА: рд╕реНрдЯреНрд░рд┐рдВрдЧ): рдХреЛрдИ => {
рдХреЙрдиреНрд╕реНрдЯ рд╡реИрд▓реНрдпреВ = рдЪрдпрдирдХрд░реНрддрд╛ (рд╕рдВрджрд░реНрдн);
рдПрд╕реАрд╕реА [рдХреБрдВрдЬреА] = рдореВрд▓реНрдп;
рд╡рд╛рдкрд╕реА рдПрд╕реАрд╕реА;
},
{},
);
рд╡рд╛рдкрд╕реА рдХрд╛ рдЙрдкрдпреЛрдЧ рдореЗрдореЛ (
(): рд░рд┐рдПрдХреНрдЯрдПрд▓рд┐рдореЗрдВрдЯ => ,
[...Object.values(props), ...Object.values(contextProps)],
);
};
рд╡рд╛рдкрд╕реА (

{(рд╕рдВрджрд░реНрдн: рдХреЛрдИ рднреА): ReactElement => }

);
};
};

рд╕рдВрджрд░реНрдн рдХреЗ рд╕рд╛рде рдбрд┐рдлрд╝реЙрд▓реНрдЯ рдирд┐рд░реНрдпрд╛рдд рдХрд░реЗрдВ;
````

рдЙрдкрдпреЛрдЧ рдЙрджрд╛рд╣рд░рдг:

export default withContext(Component, Context, { value: (context): any => context.inputs.foo.value, status: (context): any => context.inputs.foo.status, });

рдЗрд╕реЗ redux mapStateToProps рдХреЗ рд╕рдордХрдХреНрд╖ рд╕рдВрджрд░реНрдн рдХреЗ рд░реВрдк рдореЗрдВ рджреЗрдЦрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИ

рдореИрдВрдиреЗ рд░реЗрдбрдХреНрд╕ рдореЗрдВ рдХрдиреЗрдХреНрдЯ () рдХреЗ рд╕рдорд╛рди рд▓рдЧрднрдЧ рдПрдХ рд╣реЙрдХ рдмрдирд╛рдпрд╛ рд╣реИ

const withContext = (
  context = createContext(),
  mapState,
  mapDispatchers
) => WrapperComponent => {
  function EnhancedComponent(props) {
    const targetContext = useContext(context);
    const { ...statePointers } = mapState(targetContext);
    const { ...dispatchPointers } = mapDispatchers(targetContext);
    return useMemo(
      () => (
        <WrapperComponent {...props} {...statePointers} {...dispatchPointers} />
      ),
      [
        ...Object.values(statePointers),
        ...Object.values(props),
        ...Object.values(dispatchPointers)
      ]
    );
  }
  return EnhancedComponent;
};

рдХрд╛рд░реНрдпрд╛рдиреНрд╡рдпрди :

const mapActions = state => {
  return {};
};

const mapState = state => {
  return {
    theme: (state && state.theme) || ""
  };
};
export default connectContext(ThemeContext, mapState, mapActions)(Button);


рдЕрджреНрдпрддрди: рдЕрдВрддрддрдГ, рдореИрдВрдиреЗ рдЧрддрд┐рд╢реАрд▓ рд╢реНрд░реЛрддрд╛рдУрдВ (рдорд╛рдЙрд╕ рдЪрд╛рд▓ рдкрд░) рдХреЗ рд╕рд╛рде рддреЗрдЬреА рд╕реЗ рдмрджрд▓рддреЗ, рджрд╛рдиреЗрджрд╛рд░ рдбреЗрдЯрд╛ рдХреЗ рд▓рд┐рдП EventEmitter рдкрд░ рд╕реНрд╡рд┐рдЪ рдХрд┐рдпрд╛ред рдореБрдЭреЗ рдПрд╣рд╕рд╛рд╕ рд╣реБрдЖ рдХрд┐ рдореИрдВ рдиреМрдХрд░реА рдХреЗ рд▓рд┐рдП рдмреЗрд╣рддрд░ рдЙрдкрдХрд░рдг рдерд╛ред рдЖрдо рддреМрд░ рдкрд░ рдбреЗрдЯрд╛ рд╕рд╛рдЭрд╛ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдкреНрд░рд╕рдВрдЧ рдмрд╣реБрдд рдЕрдЪреНрдЫрд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдЙрдЪреНрдЪ рддрд╛рдЬрд╝рд╛ рджрд░реЛрдВ рдкрд░ рдирд╣реАрдВред

рдХреНрдпрд╛ рдпрд╣ рдШреЛрд╖рдгрд╛рддреНрдордХ рд░реВрдк рд╕реЗ рд╕рджрд╕реНрдпрддрд╛ рд▓реЗрдиреЗ рдпрд╛ рд╕рдВрджрд░реНрдн рдХреА рд╕рджрд╕реНрдпрддрд╛ рдирд╣реАрдВ рд▓реЗрдиреЗ рдХреЗ рд▓рд┐рдП рдиреАрдЪреЗ рдирд╣реАрдВ рдЖрддрд╛ рд╣реИ? рд╕рд╢рд░реНрдд рд░реВрдк рд╕реЗ рдПрдХ рдШрдЯрдХ рдХреЛ рджреВрд╕рд░реЗ рдореЗрдВ рд▓рдкреЗрдЯрдирд╛ рдЬреЛ useContext() рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддрд╛ рд╣реИред

рдореБрдЦреНрдп рдЖрд╡рд╢реНрдпрдХрддрд╛ рдпрд╣ рд╣реИ рдХрд┐ рдЖрдВрддрд░рд┐рдХ рдШрдЯрдХ рдореЗрдВ рд░рд╛рдЬреНрдп рдирд╣реАрдВ рд╣реЛ рд╕рдХрддрд╛ рд╣реИ, рдХреНрдпреЛрдВрдХрд┐ рд╢рд╛рдЦрд╛рдУрдВ рдХреЗ рдХрд╛рд░рдг рдпрд╣ рдкреНрд░рднрд╛рд╡реА рд░реВрдк рд╕реЗ рдПрдХ рдЕрд▓рдЧ рдЙрджрд╛рд╣рд░рдг рд╣реЛрдЧрд╛ред рдпрд╛, рд╣реЛ рд╕рдХрддрд╛ рд╣реИ рдХрд┐ рдЖрдк рдХрдВрдкреЛрдиреЗрдВрдЯ рдХреЛ рдкреНрд░реА-рд░реЗрдВрдбрд░ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ рдФрд░ рдлрд┐рд░ рдкреНрд░реЙрдкреНрд╕ рдХреЛ рдЕрдкрдбреЗрдЯ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдХреНрд▓реЛрди рдПрд▓реАрдореЗрдВрдЯ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред

рдХреБрдЫ рдШрдЯрдХреЛрдВ рдХрд╛ рдЗрд╕рдХреЗ рд░реЗрдВрдбрд░ рдореЗрдВ рд╕рдВрджрд░реНрдн рд╕реЗ рдХреЛрдИ рд▓реЗрдирд╛-рджреЗрдирд╛ рдирд╣реАрдВ рд╣реИ, рд▓реЗрдХрд┐рди рдЗрд╕рд╕реЗ "рдмрд╕ рдПрдХ рдорд╛рди рдкрдврд╝рдиреЗ" рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИред рдореБрдЭреЗ рдХрд┐рд╕рдХреА рдпрд╛рдж рдЖ рд░рд╣реА рд╣реИ?
context

рдХреНрдпрд╛ Context._currentValue рдЙрддреНрдкрд╛рджрди рдореЗрдВ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╕реБрд░рдХреНрд╖рд┐рдд рд╣реИ?

рдореИрдВ рдЙрди рд╕рдВрджрд░реНрднреЛрдВ рдХреЗ рд▓рд┐рдП рдШрдЯрдХреЛрдВ рдХреА рд╕рджрд╕реНрдпрддрд╛ рд▓реЗрдиреЗ рдХреА рдХреЛрд╢рд┐рд╢ рдХрд░ рд░рд╣рд╛ рд╣реВрдВ рдЬреЛ рдпрдерд╛рд╕рдВрднрд╡ рдкреНрд░рд╕реНрддреБрдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╕рд╕реНрддреЗ рд╣реИрдВред рд▓реЗрдХрд┐рди рдлрд┐рд░ рдореИрдВрдиреЗ рдЦреБрдж рдХреЛ рдкреБрд░рд╛рдиреЗ рддрд░реАрдХреЗ рд╕реЗ рд╕реНрдкреИрдЧреЗрдЯреА рдХреЛрдб рдХреЗ рд╕рд╛рде рдкреНрд░реЙрдкреНрд╕ рдкрд╛рд╕ рдХрд░рдиреЗ рдпрд╛ рдЕрдкрдбреЗрдЯ рдХреЗ рд▓рд┐рдП рдХреБрдЫ рднреА рддрд╛рд░реНрдХрд┐рдХ рдирд╣реАрдВ рд╣реЛрдиреЗ рдкрд░ рдЕрдкрдбреЗрдЯ рдХреА рд╕рджрд╕реНрдпрддрд╛ рд▓реЗрдиреЗ рд╕реЗ рдмрдЪрдиреЗ рдХреЗ рд▓рд┐рдП рдореЗрдореЛ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдкрд╛рдпрд╛ред рдореЗрдореЛ рд╕рдорд╛рдзрд╛рди рдЕрдЪреНрдЫреЗ рд╣реЛрддреЗ рд╣реИрдВ рдЬрдм рдЖрдкрдХрд╛ рдШрдЯрдХ рдкреНрд░рд╕реНрддреБрдд рдХрд░рдирд╛ рд╕рдВрджрд░реНрднреЛрдВ рдкрд░ рдирд┐рд░реНрднрд░ рдХрд░рддрд╛ рд╣реИ рд▓реЗрдХрд┐рди рдЕрдиреНрдпрдерд╛ ...

@ vamshi9666 рдХреНрдпрд╛ рдЖрдкрдиреЗ рдЗрд╕рдХрд╛ рднрд░рдкреВрд░ рдЙрдкрдпреЛрдЧ рдХрд┐рдпрд╛ рд╣реИ? рдХреНрдпрд╛ рдЖрдк рдЕрдкрдиреЗ рджреГрд╖реНрдЯрд┐рдХреЛрдг рдХреЗ рдкреЗрд╢реЗрд╡рд░реЛрдВ/рд╡рд┐рдкрдХреНрд╖реЛрдВ рдХреЛ рдиреЛрдЯрд┐рд╕ рдХрд░рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рдереЗ? рдореБрдЭреЗ рдмрд╣реБрдд рдкрд╕рдВрдж рд╣реИред рдореБрдЭреЗ рд░реЗрдбрдХреНрд╕ рдХреЗ рд╕рд╛рде рд╕рдорд╛рдирддрд╛ рдкрд╕рдВрдж рд╣реИ, рд▓реЗрдХрд┐рди рдпрд╣ рднреА рдХрд┐ рдпрд╣ рдЖрдкрдХреЛ рдРрдк рд╕реНрдЯреЗрдЯ рдореИрдиреЗрдЬрдореЗрдВрдЯ рдФрд░ рд▓реЙрдЬрд┐рдХ рдХреЛ рдПрдХ рд╕рдВрджрд░реНрдн рдХреЗ рд░реВрдк рдореЗрдВ рд╕реНрд╡рддрдВрддреНрд░ рд░реВрдк рд╕реЗ рд▓рд┐рдЦрдиреЗ рдХреЗ рд▓рд┐рдП рдХреИрд╕реЗ рдореБрдХреНрдд рдХрд░рддрд╛ рд╣реИ

рдореБрдЭреЗ рдЗрд╕ рд╕рдорд╕реНрдпрд╛ рдХрд╛ рдПрдХ рдЕрдЪреНрдЫрд╛ рд╕рдорд╛рдзрд╛рди https://recoiljs.org/ рдорд┐рд▓рд╛ред рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдЕрдЧрд░ рдЖрдк рдЗрд╕реЗ рд░рд┐рдПрдХреНрдЯ рдореЗрдВ рдПрдХреАрдХреГрдд рдХрд░рддреЗ рд╣реИрдВ рддреЛ рдпрд╣ рдмрд╣реБрдд рдЕрдЪреНрдЫрд╛ рд╣реЛрдЧрд╛ред

@ vamshi9666 рдХреНрдпрд╛ рдЖрдкрдиреЗ рдЗрд╕рдХрд╛ рднрд░рдкреВрд░ рдЙрдкрдпреЛрдЧ рдХрд┐рдпрд╛ рд╣реИ? рдХреНрдпрд╛ рдЖрдк рдЕрдкрдиреЗ рджреГрд╖реНрдЯрд┐рдХреЛрдг рдХреЗ рдкреЗрд╢реЗрд╡рд░реЛрдВ/рд╡рд┐рдкрдХреНрд╖реЛрдВ рдХреЛ рдиреЛрдЯрд┐рд╕ рдХрд░рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рдереЗ? рдореБрдЭреЗ рдмрд╣реБрдд рдкрд╕рдВрдж рд╣реИред рдореБрдЭреЗ рд░реЗрдбрдХреНрд╕ рдХреЗ рд╕рд╛рде рд╕рдорд╛рдирддрд╛ рдкрд╕рдВрдж рд╣реИ, рд▓реЗрдХрд┐рди рдпрд╣ рднреА рдХрд┐ рдпрд╣ рдЖрдкрдХреЛ рдРрдк рд╕реНрдЯреЗрдЯ рдореИрдиреЗрдЬрдореЗрдВрдЯ рдФрд░ рд▓реЙрдЬрд┐рдХ рдХреЛ рдПрдХ рд╕рдВрджрд░реНрдн рдХреЗ рд░реВрдк рдореЗрдВ рд╕реНрд╡рддрдВрддреНрд░ рд░реВрдк рд╕реЗ рд▓рд┐рдЦрдиреЗ рдХреЗ рд▓рд┐рдП рдХреИрд╕реЗ рдореБрдХреНрдд рдХрд░рддрд╛ рд╣реИ

рдореИрдВрдиреЗ рдЗрд╕реЗ рдХреЗрд╡рд▓ рдПрдХ рд╣реА рд╕реНрдерд╛рди рдкрд░ рдЗрд╕реНрддреЗрдорд╛рд▓ рдХрд┐рдпрд╛ рдФрд░ рдореЗрд░рд╛ рдкреНрд░рд╛рд░рдВрднрд┐рдХ рд▓рдХреНрд╖реНрдп рд░рд╛рдЬреНрдп рдкреНрд░рдмрдВрдзрди рдХреЛ рдЬреЗрдПрд╕рдПрдХреНрд╕ рд╕реЗ рдЕрд▓рдЧ рдХрд░рдирд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдмреЙрдпрд▓рд░рдкреНрд▓реЗрдЯ рдХрд╛ рдирд┐рд░реНрдорд╛рдг рдирд╣реАрдВ рдХрд░рдирд╛ рд╣реИред рдЗрд╕рд▓рд┐рдП рдЬрдм рдореИрдВрдиреЗ рдЙрддреНрдкрд░рд┐рд╡рд░реНрддрди рдХрд╛рд░реНрдпрдХреНрд╖рдорддрд╛ рдХреЛ рдмрдврд╝рд╛рдпрд╛, рддреЛ рдпрд╣ рд░реЗрдбрдХреНрд╕ рдХреЗ рд░реЗрдбреНрдпреВрд╕рд░ рдФрд░ рдПрдХреНрд╢рди рдХреНрд░рд┐рдПрдЯрд░ рдкреИрдЯрд░реНрди рдХреЗ рд╕рдорд╛рди рд╣реА рджрд┐рдЦрддрд╛ рдерд╛ред рдЬреЛ рдФрд░ рднреА рдЕрдЪреНрдЫрд╛ рд╣реИред рд▓реЗрдХрд┐рди рдореБрдЭреЗ рдХрд┐рд╕реА рдЪреАрдЬрд╝ рдХреЛ рдлрд┐рд░ рд╕реЗ рдЖрд╡рд┐рд╖реНрдХрд╛рд░ рдХрд░рдиреЗ рдХрд╛ рдХреЛрдИ рдорддрд▓рдм рдирд╣реАрдВ рджрд┐рдЦрддрд╛, рдЬрдм рд╡рд╣ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдкрд╣рд▓реЗ рд╕реЗ рд╣реА рдореМрдЬреВрдж рд╣реЛред

рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕

рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЛрдВ

gaearon picture gaearon  ┬╖  104рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

kib357 picture kib357  ┬╖  103рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

addyosmani picture addyosmani  ┬╖  143рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

AdamKyle picture AdamKyle  ┬╖  148рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

brunolemos picture brunolemos  ┬╖  285рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ