I am still getting my head around React hooks and am trying to use useMemo conditionally based on different factors.
My useMemo part looks like this
const headers = React.useMemo(
() => [
{
Header: "Name",
accessor: "name",
Cell: AvatarCell,
emailAccessor: "email",
},
{
Header: "Country",
accessor: "country",
Filter: SelectColumnFilter,
filter: "equals",
Cell: Country,
},
{
Header: "Address",
accessor: "address",
Cell: Address,
},
],
[]
);
However I would like to change the headers based on what language was selected so I tried to use an `if statement but this did not work
if (language === 'en')
{
const columns = React.useMemo(
() => [
{
Header: "Name",
accessor: "name",
Cell: AvatarCell,
emailAccessor: "email",
},
{
Header: "Country",
accessor: "country",
Filter: SelectColumnFilter,
filter: "equals",
Cell: Country,
},
{
Header: "Address",
accessor: "address",
Cell: Address,
},
],
[]
);
}
if (language === 'de')
{
const columns = React.useMemo(
() => [
{
Header: "Name",
accessor: "name",
Cell: AvatarCell,
emailAccessor: "email",
},
{
Header: "Land",
accessor: "country",
Filter: SelectColumnFilter,
filter: "equals",
Cell: Country,
},
{
Header: "Adresse",
accessor: "address",
Cell: Address,
},
],
[]
);
}
but it fails to compile and I get a message saying that I called the react hook conditionally.
How can I use one or the other useMemo based on the value of `language`
Thanks in advance
In order to do this, you need to have the if else logic inside the useMemo hook. And then you will want to add the variable that the logic is being applied to as a dependency. A simple example where the first header is changed when the language is de can be seen below.
What you are passing to the useMemo hook is just a function, which means you can have VERY complex logic inside of it. You don't need to limit yourself to just returning some constants and predefined variables
const columns = React.useMemo(
() => [
{
Header: language==="de"?"de-name":"Name",
accessor: "name",
Cell: AvatarCell,
emailAccessor: "email",
},
{
Header: "Country",
accessor: "country",
Filter: SelectColumnFilter,
filter: "equals",
Cell: Country,
},
{
Header: "Address",
accessor: "address",
Cell: Address,
},
],
[language]
);
Put the logic inside the useMemo inner function - use a single function for all languages. Add language to the second parameter array (so that when language changes, the result is recomputed).
for example:
const columns = React.useMemo(() => {
if (language === 'en') {
return [
{
Header: "Name",
accessor: "name",
Cell: AvatarCell,
emailAccessor: "email",
},
{
Header: "Country",
accessor: "country",
Filter: SelectColumnFilter,
filter: "equals",
Cell: Country,
},
{
Header: "Address",
accessor: "address",
Cell: Address,
},
];
} else if (language === 'de') {
return [
{
Header: "Name",
accessor: "name",
Cell: AvatarCell,
emailAccessor: "email",
},
{
Header: "Land",
accessor: "country",
Filter: SelectColumnFilter,
filter: "equals",
Cell: Country,
},
{
Header: "Adresse",
accessor: "address",
Cell: Address,
},
];
}
}, [language]);