🐎 améliore les perfs du rendu du simulateur

- En memoizant Int.NumberFormat dans Montant.js pour éviter une instantiation couteuse à chaque rendu de composant
- En transformant TargetSelection en un PureComponent
pull/510/head
Johan Girod 2019-04-02 11:50:59 +02:00
parent ecc3a8be81
commit e9b7f687a3
2 changed files with 27 additions and 28 deletions

View File

@ -1,29 +1,24 @@
import classNames from 'classnames'
import Controls from 'Components/Controls'
import InputSuggestions from 'Components/conversation/InputSuggestions'
import withColours from 'Components/utils/withColours'
import withLanguage from 'Components/utils/withLanguage'
import withSitePaths from 'Components/utils/withSitePaths'
import { encodeRuleName } from 'Engine/rules'
import { compose, propEq } from 'ramda'
import React, { Component } from 'react'
import { withTranslation } from 'react-i18next'
import { connect } from 'react-redux'
import { withRouter } from 'react-router'
import { Link } from 'react-router-dom'
import { change, Field, formValueSelector, reduxForm } from 'redux-form'
import {
analysisWithDefaultsSelector,
flatRulesSelector,
nextStepsSelector,
noUserInputSelector
} from 'Selectors/analyseSelectors'
import Animate from 'Ui/animate'
import AnimatedTargetValue from 'Ui/AnimatedTargetValue'
import { Progress } from '../sites/mycompanyinfrance.fr/layout/ProgressHeader/ProgressHeader'
import CurrencyInput from './CurrencyInput/CurrencyInput'
import QuickLinks from './QuickLinks'
import './TargetSelection.css'
import classNames from 'classnames';
import Controls from 'Components/Controls';
import InputSuggestions from 'Components/conversation/InputSuggestions';
import withColours from 'Components/utils/withColours';
import withLanguage from 'Components/utils/withLanguage';
import withSitePaths from 'Components/utils/withSitePaths';
import { encodeRuleName } from 'Engine/rules';
import { compose, propEq } from 'ramda';
import React, { Component, PureComponent } from 'react';
import { withTranslation } from 'react-i18next';
import { connect } from 'react-redux';
import { withRouter } from 'react-router';
import { Link } from 'react-router-dom';
import { change, Field, formValueSelector, reduxForm } from 'redux-form';
import { analysisWithDefaultsSelector, flatRulesSelector, nextStepsSelector, noUserInputSelector } from 'Selectors/analyseSelectors';
import Animate from 'Ui/animate';
import AnimatedTargetValue from 'Ui/AnimatedTargetValue';
import { Progress } from '../sites/mycompanyinfrance.fr/layout/ProgressHeader/ProgressHeader';
import CurrencyInput from './CurrencyInput/CurrencyInput';
import QuickLinks from './QuickLinks';
import './TargetSelection.css';
const MAX_NUMBER_QUESTION = 18
export default compose(
@ -56,7 +51,8 @@ export default compose(
})
)
)(
class TargetSelection extends Component {
class TargetSelection extends PureComponent {
render() {
let { colours, noUserInput, analysis, progress } = this.props

View File

@ -1,5 +1,6 @@
/* @flow */
import withLanguage from 'Components/utils/withLanguage'
import { memoizeWith } from 'ramda'
import React from 'react'
import './Montant.css'
@ -15,6 +16,8 @@ type ConnectedProps = {
language: string
}
const NumberFormat = memoizeWith(JSON.stringify, Intl.NumberFormat)
const Montant = ({
language,
numFractionDigit = 2,
@ -26,7 +29,7 @@ const Montant = ({
<span className={'montant ' + className} style={style}>
{value === 0 || Number.isNaN(value)
? '—'
: Intl.NumberFormat(language, {
: NumberFormat(language, {
style: type,
currency: 'EUR',
maximumFractionDigits: numFractionDigit,