Slow even with no fragments

[note89]

Hi did some pretty unscientific measurements of speed difference between a standard component and a RelayComponent and its pretty noticeable.
I switched between the below exports and switched to the view.

class StaticContainer extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View>
                <Text>
                    Hej hej hej akdfjalskdf
                    sdkafjlasdfk asdlfkjasldfkja
                    asdfklajsdlja asldkfal skdfa
                    askdfjlaskdjf asdlfkjsalkdfj
                    asldkfjals jdkfasdflkjlkasdjf
                </Text>
                <Image
                source={require('../../assets/Domestic-Kitten-Felis-catus-copia.jpg')}
                style={{width: 100, height: 100}}
                />
                <Image
                source={{uri: "https://upload.wikimedia.org/wikipedia/commons/4/4e/Pleiades_large.jpg"}}
                style={{height: 100}}
                />
            </View>
        );
    }
}

export default Relay.createContainer(StaticContainer, {
    fragments: {
    },
});

// export default StaticContainer;

This is how i called the component

                <Scene
                    key="rowing"
                    title='Rowing'
                    component={StaticContainer}
                    queries={{

                    }}
                    hideNavBar={true}
                    icon={TabRowIcon}
                    materialIconName='rowing'
                    sceneStyle={styles.tabBarContent}
                />

When haveing a standard component the render was almost instant, but in the other case i loading screen was up for a couple of seconds.

This is our relayRendererComponent

/* @flow */
import {
    View,
    Text,
    TouchableHighlight,
    InteractionManager,
} from 'react-native';
import React, { Component, PropTypes } from 'react';
import Relay from 'react-relay';

type Props = {
    component: Object,
    renderLoading: (navigationState: Object) => void,
    renderError: () => void,
    navigationState: Object,
};
type State = {
    sceneTransitionDone: boolean,
};

export class RelayComponentRenderer extends Component {
    props: Props
    state: State
    static propTypes = {
        component: PropTypes.func,
        renderLoading: PropTypes.func,
        renderError: PropTypes.func,
        navigationState: PropTypes.object,
    }

    constructor(props: Props) {
        super(props);
        this.state = {
            sceneTransitionDone: false,
        };
    }

    componentDidMount() {
        InteractionManager.runAfterInteractions(() => {
            this.setState({ sceneTransitionDone: true });
        });
    }

   // Default one. Not currently used
    renderError(error: Object, retry: Object) {
        return (
            <View style={{padding: 30}}>
                <Text>Error while fetching data from the server</Text>
                <TouchableHighlight onPress={retry}>
                    <Text>Retry?</Text>
                </TouchableHighlight>
            </View>
        );
    }

   _relayRendererRender = ({ done, error, props, retry, stale }) => {
        if (error) {
            return ( this.props.renderError || this.renderError )(error, retry);
        }

        if (props) {
            // render component itself
            return <this.props.component {...this.props} {...props} />;
        }

        // render loading
        return (this.props.renderLoading)(this.props.navigationState);
   }

   render() {
       const params = {
           ...this.props.navigationState,
       };
       delete params.environment;
       return (
           <Relay.Renderer
           Container={this.props.component}
           queryConfig={{
               queries: this.props.navigationState.queries,
               params,
               // params: this.props.navigationState,
               // TODO: not sure if it is correct to pass all the data, find the way extract only needed variables
               name: `rnrf_relay_renderer_${this.props.navigationState.key}_route`,
               // construct route name based on navState key
           }}
           environment={
               this.props.navigationState.environment
               || this.props.environment
               || (this.props.getEnvironment && this.props.getEnvironment())
               || Relay.Store
           }
           render={this._relayRendererRender}
           // onReadyStateChange={(readyState) => console.log(readyState)}
           />
       );
   }
}

export default (moduleProps: Object) => (Component: Object) => {
    return !Relay.isContainer(Component)
        ? Component // not a Relay container, return component itself
        : (props: Object) => // relay container - wrap it with renderer
            <RelayComponentRenderer
                {...moduleProps}
                {...props}
                component={Component}
            />;
};

Would be interesting to know what might attest to this difference.
No query is sent to the backend from what i can tell.

[rgovindji]

I think this is a known limitation of the current version of Relay. I saw a talk where they said Relay 2 will improve rendering speed down to 5ms. Currently it's in the 100's of ms