Prevent re-renders while using useContext hooks - reactjs

Question

I have two distinct contexts in my application - Language and Currency. Each of these contexts are consumed by two distinct functional components through the useContext hook. When one of the context values change I want React to only invoke the functional component that consumes that context and not the other. However I find that both functional components get invoked when either context values change. How can I prevent this? Even if React doesn't re-render unchanged DOM after reconciliation I would like to prevent actually calling of the functional component itself.In other words how can I memoize each component (or something similar) while still maintaining my code organization (See below)?
LanguageContext.js
import React from 'react';
const LanguageContext = React.createContext({ lang: 'english', changeLang: (lang) => { } });
export { LanguageContext };
CurrencyContext.js
import React from 'react';
const CurrencyContext = React.createContext({ cur: '$', changeCur: (cur) => { } });
export { CurrencyContext };
ContextRoot.js
import React, { useState } from 'react';
import { LanguageContext } from '../context/LanguageContext';
import { CurrencyContext } from '../context/CurrencyContext';
const ContextRoot = (props) => {
const [lang, setLang] = useState('english');
const [cur, setCur] = useState('$');
const changeLang = (lang) => {
setLang(lang);
}
const changeCur = (cur) => {
setCur(cur);
}
const langCtx = {
lang,
changeLang
};
const curCtx = {
cur,
changeCur
};
return (
<LanguageContext.Provider value={langCtx}>
<CurrencyContext.Provider value={curCtx}>
{props.children}
</CurrencyContext.Provider>
</LanguageContext.Provider>
);
}
export { ContextRoot };
App.js
import React from 'react';
import { Header } from './Header';
import { Welcome } from './Welcome';
import { Currency } from './Currency';
import { ContextRoot } from './ContextRoot';
const App = (props) => {
return (
<ContextRoot>
<div>
<Header />
<Welcome />
<Currency />
</div>
</ContextRoot>
);
}
export { App };
Header.js
import React, { useContext } from 'react';
import { LanguageContext } from '../context/LanguageContext';
import { CurrencyContext } from '../context/CurrencyContext';
const Header = (props) => {
const { changeLang } = useContext(LanguageContext);
const { changeCur } = useContext(CurrencyContext);
const handleLangClick = (lang) => {
changeLang(lang);
};
const handleCurClick = (cur) => {
changeCur(cur);
};
return (
<div>
<h2>Select your language: <button onClick={e => handleLangClick('english')}>English </button> <button onClick={e => handleLangClick('spanish')}>Spanish</button></h2>
<h2>Select your Currency: <button onClick={e => handleCurClick('$')}>Dollars </button> <button onClick={e => handleCurClick('€')}>Euros</button></h2>
</div>
);
};
export { Header };
Welcome.js
import React, { useContext } from 'react';
import { LanguageContext } from '../context/LanguageContext';
const Welcome = (props) => {
console.log('welcome..');
const { lang } = useContext(LanguageContext);
return (
<div>
<h1>{lang === 'english' ? 'Welcome' : 'Bienvenidos'}</h1>
</div>
);
};
export { Welcome };
Currency.js
import React, { useContext } from 'react';
import { CurrencyContext } from '../context/CurrencyContext';
const Currency = () => {
console.log('currency..');
const { cur } = useContext(CurrencyContext);
return (
<h2>Your chosen currency: {cur}</h2>
)
}
export { Currency };

Answer 1

what you need is useMemo. It's pretty easy to implement, take a look in docs to apply your needs. Hope help you :)
https://reactjs.org/docs/hooks-reference.html#usememo