javascript - React how can I use useMemo conditionally - Stack Overflow

admin管理员组

文章数量:1356591

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 pile 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

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 pile 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

• javascript
• reactjs
• react-hooks
• react-usememo

Share Improve this question Follow asked Aug 10, 2021 at 20:32 nad34nad34 39344 silver badges1414 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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 plex 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 reputed).

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

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

本文标签： javascriptReact how can I use useMemo conditionallyStack Overflow