TWRComponent Optimization

TWRComponents are pure functional components that rely entirely on their props for their output. This is especially important because if a value is used in a TWR component that is not passed in from the prosp, the component will fail to update on changes to that value, unless the forceUpdate prop is set to true.

The frontend relational database posed a problem to the pure functional component. Because the entire reducer state is connected to each component, every component should technically be updating whenever the state is changed. This is obviously a needless drag on the system, so instead each component looks for changes within specific tables in the state. Unfortunately, because we are using a frontend relational database, it's difficult to know exactly which parts of the database each component relies on. The solution to this issue was to provide a gex function to every TWRComponent. The gex function is a simple query function that registers which tables in a state are being called on. This information is used by the component, and all of the parent TWRComponents to know when to update.

<TWRShow tree='parent/q'>
    <TWRShow tree='users/1' replace={(user_1)=>{
        const childrenBelongingToUser_1 = user_1.gex(['children'], user_1.instance())
    }}

    or

    <TWRShow tree='users/1' replace={(user_1)=>{
        const returnASingleObjectIfHasOneRelationship = user_1.gex(['child', 'name'], user_1.instance())
    }}
    or
    <TWRShow tree='users/1' replace={(user_1)=>{
        const allChildrenInState = user_1.gex('children')
    }}
</TWRShow>

*In the above example, the TWRShow component would know to update when the users table or children changed. The parent TWRshow component would also know to update.