How to use memoizerific - 10 common examples

export class SyntaxHighlighter extends Component<
  SyntaxHighlighterProps & ReactSyntaxHighlighterProps,
  SyntaxHighlighterState
> {
  static defaultProps: SyntaxHighlighterProps = {
    language: null,
    copyable: false,
    bordered: false,
    padded: false,
    format: true,
    className: null,
  };

  state = { copied: false };

  formatCode = memoize(2)((language: string, code: string) => {
    let formattedCode = code;
    if (language === 'jsx') {
      try {
        // eslint-disable-next-line @typescript-eslint/no-object-literal-type-assertion
        formattedCode = beautify(code, {
          indent_size: 2,
          brace_style: 'collapse-preserve-inline',
          end_with_newline: true,
          wrap_line_length: 80,
          e4x: true, // e4x is not available in JsBeautify types for now
        } as JsBeautifyOptions);
      } catch (error) {
        // eslint-disable-next-line no-console
        console.warn("Couldn't format code", formattedCode);
      }
    }

Story ids need to be unique -- ensure you aren't using the same names modolo url-sanitization.
      `);
    }

    const identification = {
      id,
      kind,
      name,
      story: name, // legacy
    };

    // immutable original storyFn
    const getOriginal = () => original;

    // lazily decorate the story when it's loaded
    const getDecorated = memoize(1)(() => applyDecorators(getOriginal(), getDecorators()));

    const storyFn = p => getDecorated()({ ...identification, parameters: { ...parameters, ...p } });

    _data[id] = toChild({
      ...identification,

      getDecorated,
      getOriginal,
      storyFn,

      parameters,
    });

    // LEGACY DATA
    this.addLegacyStory({ kind, name, storyFn, parameters });

if (!item || item.isRoot) {
    return undefined;
  }
  return get(item.parent, dataset);
});
export const getParents = memoize(1000)((id, dataset) => {
  const parent = getParent(id, dataset);

  if (!parent) {
    return [];
  }
  return [parent, ...getParents(parent.id, dataset)];
});

export const getMains = memoize(1)(dataset => toList(dataset).filter(m => m.depth === 0));
const getMainsKeys = memoize(1)(dataset => getMains(dataset).map(m => m.id));

export const getPrevious = ({ id, dataset, expanded }) => {
  // STEP 1
  // find parent
  // if no previous sibling, use parent
  // unless parent is root
  //
  // STEP 2
  // find previous sibling
  // recurse into that sibling's last children that are expanded

  // debugger;
  const current = get(id, dataset);
  const parent = getParent(id, dataset);
  const mains = getMainsKeys(dataset);

case takerFeePercent.value:
		takerFeePercent.label = selectedSort.isDesc ? 'Highest Taker Fee' : 'Lowest Taker Fee';
		takerFeePercent.isDesc = selectedSort.isDesc;
		break;
	case makerFeePercent.value:
		makerFeePercent.label = selectedSort.isDesc ? 'Highest Maker Fee' : 'Lowest Maker Fee';
		makerFeePercent.isDesc = selectedSort.isDesc;
		break;
	default:
		break;
	}

	return [creationTime, endDate, volume, takerFeePercent, makerFeePercent];
});

export const selectOnChangeSort = memoizerific(1)((dispatch) => (prop, isDesc) => {
	const o = {};

	if (prop) {
		o.prop = prop;
	}
	if (isDesc || isDesc === false) {
		o.isDesc = isDesc;
	}

	dispatch(updateSelectedSort(o));
});

import memoizerific from 'memoizerific';

export default function() {
	return selectSortOptions();
}

export const selectSortOptions = memoizerific(1)(function() {
    return [
    	{ label: 'Creation Date', value: 'creationSortOrder' },
    	{ label: 'End Date', value: 'endBlock' },
    	{ label: 'Volume', value: 'volume' },
    	{ label: 'Fee', value: 'tradingFeePercent' },
    	{ label: 'Description', value: 'description' }
    ];
});

import css from 'react-syntax-highlighter/dist/esm/languages/prism/css';
import html from 'react-syntax-highlighter/dist/esm/languages/prism/markup';

import { PrismLight as ReactSyntaxHighlighter } from 'react-syntax-highlighter';

import { ActionBar } from '../ActionBar/ActionBar';
import { ScrollArea } from '../ScrollArea/ScrollArea';

import { formatter } from './formatter';

ReactSyntaxHighlighter.registerLanguage('jsx', jsx);
ReactSyntaxHighlighter.registerLanguage('bash', bash);
ReactSyntaxHighlighter.registerLanguage('css', css);
ReactSyntaxHighlighter.registerLanguage('html', html);

const themedSyntax = memoize(2)(theme =>
  Object.entries(theme.code || {}).reduce((acc, [key, val]) => ({ ...acc, [`* .${key}`]: val }), {})
);

export interface WrapperProps {
  bordered?: boolean;
  padded?: boolean;
}

const Wrapper = styled.div(
  ({ theme }) => ({
    position: 'relative',
    overflow: 'hidden',
    color: theme.color.defaultText,
  }),
  ({ theme, bordered }) =>
    bordered

import React from 'react';
import memoize from 'memoizerific';

import { Consumer } from '@storybook/api';

import { Preview } from '../components/preview/preview';

const nonAlphanumSpace = /[^a-z0-9 ]/gi;
const doubleSpace = /\s\s/gi;
const replacer = match => ` ${match} `;
const addExtraWhiteSpace = input =>
  input.replace(nonAlphanumSpace, replacer).replace(doubleSpace, ' ');

const createPreviewActions = memoize(1)(api => ({
  toggleFullscreen: () => api.toggleFullscreen(),
}));
const mapper = ({ api, state: { layout, location, selected } }) =>
  api.renderPreview
    ? { renderPreview: api.renderPreview }
    : {
        api,
        getElements: api.getElements,
        actions: createPreviewActions(api),
        options: layout,
        description: selected ? addExtraWhiteSpace(`${selected.kind} - ${selected.name}`) : '',
        ...api.getUrlState(),
        location,
      };

const PreviewConnected = React.memo(props => (

getNext,
  toFiltered,
} from './utils';

import {
  DefaultSection,
  DefaultList,
  DefaultLink,
  DefaultLeaf,
  DefaultHead,
  DefaultRootTitle,
  DefaultFilter,
  DefaultMessage,
} from './components';

const createHandler = memoize(10000)((item, cb) => (...args) => cb(...args, item));

const linked = (C, { onClick, onKeyUp, prefix = '', Link: L }) => {
  const Linked = React.memo(p => (
    
      
    
  ));
  Linked.displayName = `Linked${C.displayName}`;

  return Linked;
};

import memoizerific from 'memoizerific';
import { MY_POSITIONS, MY_MARKETS, MY_REPORTS } from '../../../modules/app/constants/pages';

export default function () {
	const { links } = require('../../../selectors');

	return selectPortfolioNavItems(links);
}

export const selectPortfolioNavItems = memoizerific(1)(links => (
	[
		{
			label: 'My Positions',
			link: links.myPositionsLink,
			page: MY_POSITIONS
		},
		{
			label: 'My Markets',
			link: links.myMarketsLink,
			page: MY_MARKETS
		},
		{
			label: 'My Reports',
			link: links.myReportsLink,
			page: MY_REPORTS
		}

import React from 'react';
import memoize from 'memoizerific';

import { Badge } from '@storybook/components';
import ListItemIcon from '../components/sidebar/ListItemIcon';

import { shortcutToHumanString } from '../libs/shortcut';

import Sidebar from '../components/sidebar/Sidebar';
import { Consumer } from '../core/context';

const createMenu = memoize(1)((api, shortcutKeys, isFullscreen, showPanel, showNav) => [
  {
    id: 'S',
    title: 'Show sidebar',
    onClick: () => api.toggleNav(),
    right: shortcutToHumanString(shortcutKeys.toggleNav),
    left: showNav ?  : ,
  },
  {
    id: 'A',
    title: 'Show addons',
    onClick: () => api.togglePanel(),
    right: shortcutToHumanString(shortcutKeys.togglePanel),
    left: showPanel ?  : ,
  },
  {
    id: 'D',