How to use the recompose.pure function in recompose

import { pure } from 'recompose';
import { Row } from 'reactstrap';
import FieldsetCol from './FieldsetCol';

function FieldsetRow({ rowId, row, ...rest }) {
  return (
    
      {row.cols &&
        row.cols.map((col, colId) => (
          
        ))}
    
  );
}

export default pure(FieldsetRow);

{text: ">", value: Filter.GREATER_THAN},
    {text: ">=", value: Filter.GREATER_THAN_EQUALS},
    {text: "<", value: Filter.LOWER_THAN},
    {text: "<=", value: Filter.LOWER_THAN_EQUALS},
    {text: "IN", value: Filter.IN},
    {text: "NOT IN", value: Filter.NOT_IN},
    {text: "REGEX", value: Filter.REGEX},
]

const handleEscape = (event: React.KeyboardEvent, props: StreamFilterProps) => {
    if(event.key === 'Escape') {
        props.onRemoveFilter(props.index);
    }
}

export const StreamFilter = pure((props: StreamFilterProps) => {

    const propertyOptions = props.existingFilterProps.map(prop =&gt; <option value="{prop}">).toJS();

    const autoFocus = typeof props.autoFocus === 'undefined'? true : props.autoFocus;

    return 
         props.onPropertyChanged(props.index, event.target.value)}
            onKeyDown={(event) =&gt; handleEscape(event, props) }</option>

import React from 'react';
import { pure } from 'recompose';
import OutboundLink from './OutboundLink';
import settings from 'project/settings.yml'

const Footer = () => {
  return <div style="{{">
    {settings.home.footer} For more information, please see the&nbsp;
    
      license
     info.
  </div>
}
export default pure(Footer);

import { pure } from 'recompose';

import * as i18n from '../translations';
import { OpenTimelineProps } from '../types';
import { HeaderPanel } from '../../header_panel';

type Props = Pick & {
  /** The number of timelines currently selected */
  selectedTimelinesCount: number;
};

/**
 * Renders the row containing the tile (e.g. Open Timelines / All timelines)
 * and action buttons (i.e. Favorite Selected and Delete Selected)
 */
export const TitleRow = pure(
  ({ onAddTimelinesToFavorites, onDeleteSelected, selectedTimelinesCount, title }) => (
    
      {(onAddTimelinesToFavorites || onDeleteSelected) && (
        
          {onAddTimelinesToFavorites && (
            
              
                {i18n.FAVORITE_SELECTED}

timeline: Object,
    timelineIndex: number,
    ownerInfo: Object,
    isStreaming: boolean,
    contents: Array,
    latestContentId: ?string,
    contentFormContent: Object,
    setTimelineMenu: Function,
    updateContentText: Function,
    setReply: Function,
    callApi: Function,
    deleteTimeline: Function,
    setScrollPosition: Function,
};

const Timeline = pure((props: Props) => (

zIndex: 20,
    display: "flex"
});

const addIcon = css({
    color: "var(--mdc-theme-secondary)",
    transition: "transform 0.2s",
    "&:hover": {
        transform: "scale(1.3)"
    },
    "&::before, &::after": {
        display: "none"
    }
});

const Column = pure(({ element, dropElement, togglePlugin }) => {
    return (
        
            
                
                    
                        {({ id, path, type, elements }) => (
                            
                                {!elements.length && (

/*
 * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
 * or more contributor license agreements. Licensed under the Elastic License;
 * you may not use this file except in compliance with the Elastic License.
 */

import { pure } from 'recompose';
import { PrettyDuration as Component } from './pretty_duration';

export const PrettyDuration = pure(Component);

*/

import { EuiFilterButton, EuiFilterGroup } from '@elastic/eui';
import React from 'react';

import { pure } from 'recompose';
import { FlowDirection } from '../../graphql/types';

import * as i18n from './translations';

interface Props {
  selectedDirection: FlowDirection;
  onChangeDirection: (value: FlowDirection) => void;
}

export const FlowDirectionSelect = pure(({ onChangeDirection, selectedDirection }) => (
  
     onChangeDirection(FlowDirection.uniDirectional)}
      data-test-subj={FlowDirection.uniDirectional}
    >
      {i18n.UNIDIRECTIONAL}
    

     onChangeDirection(FlowDirection.biDirectional)}
      data-test-subj={FlowDirection.biDirectional}
    >
      {i18n.BIDIRECTIONAL}

//@flow
import React from "react";
import { pure } from "recompose";
import Element from "webiny-app-cms/editor/components/Element";
import type { ElementType } from "webiny-app-cms/types";

const Document = pure(({ element }: { element: ElementType }) => {
    return (
        <div>
            {element.elements.map(el =&gt; (
                <element id="{el}">
            ))}
        </element></div>
    );
});

export default Document;

CountBadgeContainer.displayName = 'CountBadgeContainer';

interface Props {
  /** The title of the category */
  categoryId: string;
  /**
   * A map of categoryId -> metadata about the fields in that category,
   * filtered such that the name of every field in the category includes
   * the filter input (as a substring).
   */
  filteredBrowserFields: BrowserFields;
  /** The timeline associated with this field browser */
  timelineId: string;
}

export const CategoryTitle = pure(({ filteredBrowserFields, categoryId, timelineId }) => (
  
    
      
        <h5>{categoryId}</h5>
      
    

    
      
        
          {getFieldCount(filteredBrowserFields[categoryId])}