Add support for inline render functions

Is your feature request related to a problem? Please describe.

Since the initial release, react-photo-album has rendered user-provided custom render functions as JSX elements. This approach doesn't work well for inline render functions because custom render functions won't be referentially equal on subsequent renders, and React would treat them as different elements. As a result, React's reconciliation algorithm would completely tear down and rebuild the corresponding DOM subtree on each subsequent render, which could result in serious performance or visual stability impact under frequent repaint conditions.

As of this writing, 2 out of 3 public GitHub repositories using custom render functions implemented them in a non-static context. This fact highlights the importance of adding proper support for inline render functions.

Describe the solution you'd like

Invoke custom renderers as functions rather than render them as JSX elements.

Additional context

1) We are changing the signature of the custom container render function with this release.

const renderContainer = ({ containerProps, containerRef, children }: RenderContainerProps) => (
    // ...                        
)

The forwardRef variant is now deprecated and will be removed with the next major release (also the forwardRef variant still should not be used in inline render function).

2) Implementing custom render functions either in static context or wrapped with a useCallback hook is still generally recommended from the performance point of view. However, inline render functions should work perfectly fine under non-frequent repaint conditions.

Recommended approach:

const renderContainer = (props: RenderContainerProps) => ( ... )

const renderRowContainer: RenderRowContainer = (props) => ( ... )

const renderColumnContainer: RenderColumnContainer = (props) => ( ... )

const renderPhoto: RenderPhoto = (props) => ( ... )

const MyComoponent = () => (
    <PhotoAlbum
        renderContainer={renderContainer}
        renderRowContainer={renderRowContainer}
        renderColumnContainer={renderColumnContainer}
        renderPhoto={renderPhoto}
        ...
    />
)

Acceptable approach:

const MyComoponent = () => (
    <PhotoAlbum
        renderContainer={(props: RenderContainerProps) => ( ... )}
        renderRowContainer={(props) => ( ... )}
        renderColumnContainer={(props) => ( ... )}
        renderPhoto={(props) => ( ... )}
        ...
    />
)

igordanchenko / react-photo-album

Add support for inline render functions #48