React how can I use useMemo conditionally

Question

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

Answer 1

In this case, the Daniel answer is suitable, because you need to change only a header, but sometimes you need to add an object to an array by condition, in which case you can do this

// WARNING! Use clean object names, not "a, b, c, d"
const a = React.useMemo(() => {
  {
    Header: "Name",
    accessor: "name",
    Cell: AvatarCell,
    emailAccessor: "email",
  }, []
});
const b = React.useMemo(() => {
  {
    Header: "Country",
    accessor: "country",
    Filter: SelectColumnFilter,
    filter: "equals",
    Cell: Country,
  }, []
});
const c = React.useMemo(() => {
  {
    Header: "En-Name", // only en header
    accessor: "name",
    Cell: AvatarCell,
    emailAccessor: "email",
    blablablaOnlyEnColumn = "only en" // new only en column
  }, []
});
const d = React.useMemo(() => {
  {
    Header: "De-Name", // only de header
    accessor: "name",
    Cell: AvatarCell,
    emailAccessor: "email",
  }, []
});

const columns = React.useMemo(() => {
  if (language === 'en') {
    return [ a, b, c ]; // without "d"
  } else if (language === 'de') {
    return [ a, b, d ]; // without "c"
  }
}, [language, a, b, c, d]);

Updated: You can also use simpler code

const columns = React.useMemo(() => {
  const innerArr = [
    {
      Header: "Name",
      accessor: "name",
      Cell: AvatarCell,
      emailAccessor: "email",
    },
    {
      Header: "Country",
      accessor: "country",
      Filter: SelectColumnFilter,
      filter: "equals",
      Cell: Country,
    },
  ]
  if (language === 'en') {
    innerArr.push({
      Header: "En-Name", // only en header
      accessor: "name",
      Cell: AvatarCell,
      emailAccessor: "email",
      blablablaOnlyEnColumn = "only en" // new only en column
    });
  }
  else if (language === 'de') {
    innerArr.push({
      Header: "De-Name", // only de header
      accessor: "name",
      Cell: AvatarCell,
      emailAccessor: "email",
    });
  }

  return innerArr;
}, [language]);

Answer 2

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]);

Answer 3

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]
  );