Theo's Typesafe Cult•3y ago

rcTable Rerenders useEffect

hi guys, in these couple of days i tried to solve this problem of rerenders in my code, i don't understand the reason for it..., i tried to check if there was like a return statement after the hook or a rule that breaks the hook rules in every component logged in the error but nothing...

14 Replies

barry•3y ago

Again show code when asking for help Make a gist for the file

barry•3y ago

https://gist.GitHub.com

Gist

Discover gists

GitHub Gist: instantly share code, notes, and snippets.

samueleOP•3y ago

i found it but idk how to resolve it

{
            title: t('table:table-item-unit'),
            dataIndex: 'price',
            key: 'price',
            align: 'right',
            width: 160,
            render: (value: number, record: Product) => {
                const { price: max_price } = usePrice({
                    amount: record.max_price!,
                })
                const { price: min_price } = usePrice({
                    amount: record.min_price!,
                })
                const { price } = usePrice({
                    amount: value,
                })
                return (
                    <>
                        {record.product_type === ProductType.Variable ? (
                            <span
                                className="whitespace-nowrap"
                                title={`${min_price} - ${max_price}`}
                            >{`${min_price} - ${max_price}`}</span>
                        ) : (
                            <span className="whitespace-nowrap" title={price}>
                                {price}
                            </span>
                        )}
                    </>
                )
            },
        },

{
            title: t('table:table-item-unit'),
            dataIndex: 'price',
            key: 'price',
            align: 'right',
            width: 160,
            render: (value: number, record: Product) => {
                const { price: max_price } = usePrice({
                    amount: record.max_price!,
                })
                const { price: min_price } = usePrice({
                    amount: record.min_price!,
                })
                const { price } = usePrice({
                    amount: value,
                })
                return (
                    <>
                        {record.product_type === ProductType.Variable ? (
                            <span
                                className="whitespace-nowrap"
                                title={`${min_price} - ${max_price}`}
                            >{`${min_price} - ${max_price}`}</span>
                        ) : (
                            <span className="whitespace-nowrap" title={price}>
                                {price}
                            </span>
                        )}
                    </>
                )
            },
        },

the usePrice are the problem, i tried to put it outsides but it doesn't work @barry

samueleOP•3y ago

this gives the error

export default function usePrice(data?: PriceProps | null) {
    console.log('🚀 - file: use-price.ts - line 51 - usePrice - data', data)
    const { currency } = useSettings()
    const { amount, baseAmount, currencyCode = currency } = data ?? {}
    const locale = siteSettings.defaultLanguage
    const value = useMemo(() => {
        if (typeof amount !== 'number' || !currencyCode) return ''

        return baseAmount
            ? formatVariantPrice(amount, baseAmount, currencyCode, locale)
            : formatPrice(amount, currencyCode, locale)
    }, [amount, baseAmount, currencyCode, locale])
    console.log('🚀 - file: use-price.ts - line 38 - value - value', value)

    return typeof value === 'string' ? { price: value, basePrice: null, discount: null } : value
}

export default function usePrice(data?: PriceProps | null) {
    console.log('🚀 - file: use-price.ts - line 51 - usePrice - data', data)
    const { currency } = useSettings()
    const { amount, baseAmount, currencyCode = currency } = data ?? {}
    const locale = siteSettings.defaultLanguage
    const value = useMemo(() => {
        if (typeof amount !== 'number' || !currencyCode) return ''

        return baseAmount
            ? formatVariantPrice(amount, baseAmount, currencyCode, locale)
            : formatPrice(amount, currencyCode, locale)
    }, [amount, baseAmount, currencyCode, locale])
    console.log('🚀 - file: use-price.ts - line 38 - value - value', value)

    return typeof value === 'string' ? { price: value, basePrice: null, discount: null } : value
}

samueleOP•3y ago

@barry

barry•3y ago

Yeah don’t just tag me

samueleOP•3y ago

ok sorry

Unknown User•3y ago

Message Not Public

samueleOP•3y ago

i was using a custom hook inside the code just install the extentions 'sonarlint' and it will the you the error on the code the usePrice one @Spooky

Unknown User•3y ago

Message Not Public

samueleOP•3y ago

samueleOP•3y ago

this is the extension

Unknown User•3y ago

Message Not Public

samueleOP•3y ago

yep, much better for performance

Gaming

Programming

rcTable Rerenders useEffect