Accordion.jsx

import config from './assets/config';
import styles from './assets/styles';

const Accordion = ({ panels, ...props }) => {
  const { name, persist } = useConfig(props);

  const [live, setLive] = useState(
    panels.reduce(($, { active, id }, i) => active ? $.concat(id || i) : $, [])
  );

  return (
    <Module name={name} {...props}>
      {panels.map(({ title, content, callback, id = i }, i) => (
        <Component name='panel' active={live.includes(id)} key={id}>
          <Component name='title' onClick={() => setLive(panelUpdater(id, persist, callback))}>
            {title}
          </Component>
          <Component name='content'>
            {content}
          </Component>
        </Component>
      ))}
    </Module>
  );
  
  function panelUpdater(id, persist, callback) {
    callback && callback(live.includes(id) ? 'close' : 'open');
  
    return live.reduce(($, panel) => {
      return panel === id ? ($ = $.filter(item => item !== id)) && $ : persist && $.push(panel), $;
    }, [id]);
  }
}

Accordion.defaultProps = { config, styles }

export default Accordion;

Non-explicit imports = triggered. Doesn't this break editor support and have some bundle implications? Either way you do you fam, live your best life, go get em tiger

Might be worth wrapping your component in React.memo?

Could also break all the useConfig + useState + panelUpdater functionality into a single hook? usePanel or something