react component optimization Dears
I have following component
import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { filterTransactionsByDates } from 'Utils/functions';
import {ReactComponent as BilanceIcon} from 'assets/icons/balanceDashboardIcon.svg';
import { ReactComponent as IncomeIcon } from 'assets/icons/incomeDashboardIcon.svg';
import { ReactComponent as SavingsIcon } from 'assets/icons/savingsDashboardIcon.svg';
import { ReactComponent as ExpensesIcon } from 'assets/icons/expensesDashboardIcon.svg';

import SingleSummaryField from 'components/UI/SingleSummaryField'

const Wrapper = styled.div`
    width: 96%;
    height: 100%;
    display: flex;
    flex-flow: column;
    gap: 21px;
`

const Row = styled.div`
    display: flex;
    flex-flow: row;
    gap: 21px;
`

const BudgetSummary = ({ budgetSummary }) =&gt; {
  const {expensesSum, incomesSum, balance} = budgetSummary;
  return (
    &lt;Wrapper&gt;
      &lt;Row&gt;
        &lt;SingleSummaryField amount={balance} name=&quot;Balance&quot;&gt;
          &lt;BilanceIcon /&gt;
        &lt;/SingleSummaryField&gt;
        &lt;SingleSummaryField amount={incomesSum} name=&quot;Income&quot;&gt;
          &lt;IncomeIcon /&gt;
        &lt;/SingleSummaryField&gt;
      &lt;/Row&gt;
      &lt;Row&gt;
        &lt;SingleSummaryField amount={1000} name=&quot;Savings&quot;&gt;
          &lt;SavingsIcon /&gt;
        &lt;/SingleSummaryField&gt;
        &lt;SingleSummaryField amount={0 - expensesSum} name=&quot;Expenses&quot;&gt;
          &lt;ExpensesIcon /&gt;
        &lt;/SingleSummaryField&gt;
      &lt;/Row&gt;
    &lt;/Wrapper&gt;
  );
};

BudgetSummary.propTypes = {
  budgetSummary: PropTypes.shape({
    expensesSum: PropTypes.number.isRequired,
    incomesSum: PropTypes.number.isRequired,
    balance: PropTypes.number.isRequired,
  }),
};

const getBudgetSummary = createSelector(
  (state) =&gt; state.expenses.expenses,
  (state) =&gt; state.incomes.incomes,
  (state) =&gt; state.datesRange.datesRange,
  (expenses, incomes, datesRange) =&gt; {
    const filteredExpenses = filterTransactionsByDates(expenses, datesRange);
    const filteredIncomes = filterTransactionsByDates(incomes, datesRange);

    const expensesSum = filteredExpenses.reduce((sum, currentTransaction) =&gt; {
      return sum + currentTransaction.amount;
    },0);

    const incomesSum = filteredIncomes.reduce((sum, currentTransaction) =&gt; {
      return sum + currentTransaction.amount;
    }, 0);

    const balance = incomesSum - expensesSum;

    return {
      expensesSum: expensesSum,
      incomesSum: incomesSum,
      balance: balance,
    };
  }
)

const mapState = (state) =&gt; {
  return {
    budgetSummary: getBudgetSummary(state)
  }
}

export default connect(mapState)(BudgetSummary);

What do you think about providing data
to the component ? Do you think that method which is being used right now is fine or it would be better to separate the logic to some kind of container component or maybe shall I create separate component which will handle only js operations on data ?
Cześć Łukasz,
I'd personally move some of the logic to the separate file. Eg. getBudgedSummary.That way, Your component will be more readable and easier to test.
btw,
instead of expensesSum: expensesSum, You can simply go for expensesSum