Skip to main content

Hi,



I am trying to have an app that dynamically shows information from calling a service whenever a new cell is selected. This is working, but it seems to be stuck in an endless loop and continually re-renders even when the selection is not changing.



Any React guru who knows a better way please chime in!



import React, { useState, useEffect } from 'react';


import {


    initializeBlock,


    useBase,


    useRecords,


    useGlobalConfig,


    useSession,


    useLoadable, 


    useWatchable,


    Heading,


    Box


} from '@airtable/blocks/ui';


import { cursor } from '@airtable/blocks';


import ConfigField from './components/ConfigField.js'





const _ = require('lodash')


const axios = require('axios')





function UpdateAsin() {





    const base = useBase();


    useLoadable(cursor);


    useWatchable(cursor, ['selectedRecordIds', 'selectedFieldIds', 'activeTableId', 'activeViewId']);


    const table = base.getTableByIdIfExists(cursor.activeTableId)


    const globalConfig = useGlobalConfig();


    const configFields = {


        upc: new ConfigField('upc', 'upcFieldId', table)


    }


    const field = configFields.upc.field


    const ui = _.map(configFields, 'ui')





    return (


        <div>


            <Config fields={ui} gc={globalConfig} env={ui} />


            <Box padding="1rem">


                <ShowMwsData table={table}


                    field={field}


                    selectedRecordIds={cursor.selectedRecordIds}


                />


            </Box>


        </div>


    );


}





function ShowMwsData({ table, field, selectedRecordIds }) {


    if (!selectedRecordIds || selectedRecordIds.length == 0) {


        return (


            <Heading>Please select 1 or more records {selectedRecordIds ? selectedRecordIds.length : 'null'} </Heading>


        )


    }


    const selectedRecordIdsSet = new Set(selectedRecordIds);


    const records = useRecords(table, { fields: [field] });


    const selectedRecords = records.filter(record => selectedRecordIdsSet.has(record.id));


    const r = selectedRecords[0]


    return (


        <Box>


            <Heading>{selectedRecords.length} selected</Heading>


            <ShowSingle key={r.id} upc={r.getCellValueAsString(field)} />            


        </Box>


    )


}





function ShowSingle({ upc }) {


    const [mws, setMws] = useState({})





    axios.get(`http://localhost:8080/?upc=${upc}`)


        .then((response) => {


            setMws(response.data)


        })





    if (Object.keys(mws).length === 0) {


        return (<div></div>)


    }





    return (


        <Box>


            {


               JSON.stringify(mws, null, 4)


            }


        </Box>


    )


}





function Config({ table, fields, gc, env }) {





    return (


        <Box padding={3} borderBottom="thick">


            {fields}


        </Box>


    )


}


initializeBlock(() => <UpdateAsin />);

Right now, your external call is in the main render function for ShowSingle component, which will re-render whenever mws changes, resulting in the infinite loop you’re seeing.



To fix this, you’ll only want to trigger this request when the upc changes. You can accomplish that using a React useEffect hook, and can add extra validation using a custom usePrevious hook to store the last value of upc. Something like this…



// pulled from https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state


function usePrevious(value) {


  const ref = useRef();


  useEffect(() => {


    ref.current = value;


  });


  return ref.current;


}





function ShowSingle({ upc }) {


    const cmws, setMws] = useState({})


    const prevUpc = usePrevious(upc)





    useEffect(() => {


        if (upc !== prevUpc) {


            axios.get(`http://localhost:8080/?upc=${upc}`)


                .then((response) => {


                    setMws(response.data)


                });


        }


    },  setMws, prevUpc, upc])





    // ...rest of code


}

Excellent! Works Great!



I come from a Vue background where this is a little more magical. I had tried useEffect() but was missing useRef().

Reply


Terms & Conditions