Как закончить функционал сортировки списка (React)?

Question

[Denis_8106]

Ребята, подскажите как закончить функционал данного компонента, сортировки списка.
В компоненте собираются 2 массива - 1й массив прилетает из Context, 2й - это список 3х иконок отвечающих за сортировку 1го списка. Состояние иконок прилетает пропсами.
И в целом функционал работает, т.е. не совсем, - при нажатии иконок (одной из трех) в консоль выводится соответствующая запись функции с номером, а самой сортировки списка пока нет. Поэтому и возник этот вопрос.

import React, {useContext, useEffect} from 'react';
import Context from '../context';
import Radium from 'radium';

const ListCompaniesItems = (props) => {
	const styles = {
		li: {
			marginBottom: 10,
			cursor: 'pointer',
			transition: '0.1s',
			
			':hover': {
				color: '#fff',
			}
		}
	}
	
	const { companyList, toggleStateCompany, toggleTabCompany } = useContext(Context)
	
	const activeIcon = (props.activeIcon);
	
	useEffect(() => {
		(activeIcon === 1) && console.log('функция 1'); //.map(item => (
		(activeIcon === 2) && console.log('функция 2'); //.sort((a, b) => a.name.localeCompare(b.name)).map(item => (
		(activeIcon === 3) && console.log('функция 3'); //.sort((a, b) => a.name.localeCompare(b.name)).reverse().map(item => (
	}, [activeIcon]);
	
	return (
		<ul>
			{companyList.map(item => (
				<li key={item.id} style={styles.li}
					className={toggleStateCompany === item.id ? 'active-menu' : ''}
					onClick={() => toggleTabCompany(item.id)}
				>
					{item.name}
				</li>
			))}
		</ul>
	);
};

export default Radium (ListCompaniesItems);

Можно ли код ".map(item => (" заменить на некую переменную, в которой в виде строки передается нужный код, чтобы при условии (код в useEffect) происходила замена функционала сортировки 1го списка? Понимаю, что моя идея авантюрная), но может как-то можно его докрутить до ума?! Заранее спасибо.

Answer 1

[antsam]

вместо useEffect вам нужен useMemo

const sortedCompanyList = useMemo(
    () => sort(companyList, activeIcon),
    [companyList, activeIcon]
)

Желательно что функция sort(companyList, activeIcon) возвращала новый массив а не мутировала companyList.
Да, и почитайте про мемоизацию и хук useMemo

Comments

[Denis_8106]

Спасибо за коммент. Читал про useMemo. Да, наверное это более удачное решение нежели useEffect, но пока не могу понять как в моей истории выглядит функция sort. Я так понимаю она должна собирать в себе три условия/состояния фильтра.