title: React/React-Hooks: Need to run a function onLoad within React Hooks component
body: <p>I have a parent component with a function that runs a validation on an email input field and passes that function as a prop down to the child component that actually contains the input field needing validation. Validations are working, the only issue I have now is that the validation doesn't run on load so even when the input field is pre populated with a user email, the validation's default state is set as failing so that a user will have to click into the input field and click out in order to trigger the onBlur function and thus the validation. I'm not sure how to run a function on load using react hooks as I'm still fairly new to using them. </p>
  
  <p><code>Parent Component</code></p>
  
  <pre><code>import React, { Component, Fragment } from 'react'
  import PropTypes from 'prop-types'
  import { connect } from 'react-redux'
  import styled from 'styled-components'
  import { Row, Col } from 'antd'
  import * as actions from '../../actions'
  import { tableColumnProps } from '../../propTypes'
  import Section from '../../components/layout/Section'
  import CustomerDetails from '../../components/orders/CustomerDetails'
  import AccountDetails from '../../components/orders/AccountDetails'
  import ExistingServices from '../../components/orders/ExistingServices'
  import OfferBundlesFilters from '../../components/orders/OfferBundlesFilters'
  import OfferBundlesTable from '../../components/orders/OfferBundlesTable'
  import OffersHeader from '../../components/orders/OffersHeader'
  
  function validateEmail(value) {
    const errors = { hasError: false }
    if (value === '') {
      errors.email = 'Email address or Email Opt Out is required'
      errors.hasError = true
      return errors
    }
  
    if (!/\S+@\S+\.\S+/.test(value)) {
      errors.email = 'Email address is invalid'
      errors.hasError = true
      return errors
    }
    return errors
  }
  
  export class OffersPage extends Component {
    constructor(props) {
      super(props)
  
      this.state = {
        customerEmail: {},
        disableEmailValidation: false,
        emailValidation: {
          isValid: false,
          validationError: ''
        }
      }
    }
  
    componentDidMount() {
      this.props.getOffers()
    }
  
    toggleDisableInput = value =&gt; {
      this.setState({ disableEmailValidation: value })
    }
  
    removeEmailValidationError = () =&gt; {
      this.setState({
        emailValidation: {
          isValid: true,
          validationError: ''
        }
      })
    }
  
    checkIfCustomerEmailIsValid = inputValue =&gt; {
      const validationResult = validateEmail(inputValue)
      if (validationResult.hasError === true) {
        this.setState({
          emailValidation: {
            isValid: false,
            validationError: validationResult.email
          }
        })
      } else {
        this.removeEmailValidationError()
      }
    }
  
    getEmailValue = email =&gt; {
      if (email.hasError) {
        this.setState({ customerEmail: email })
      }
    }
  
    render() {
      const {
        customer,
        offers,
        services,
        // selectOffer,
        selectedOffer = {},
        offerColumns,
        filters,
        updateFilter,
        updateCustomer
      } = this.props
  
      return (
        &lt;Fragment&gt;
          &lt;Row gutter={48}&gt;
            &lt;Col span={24}&gt;
              &lt;OffersHeader
                customer={customer}
                onPaidByChange={updateCustomer}
              /&gt;
            &lt;/Col&gt;
          &lt;/Row&gt;
          &lt;SectionRow&gt;
            &lt;div&gt;
              &lt;Section title="Customer"&gt;
                &lt;CustomerDetails
                  customer={customer}
                  getEmailValue={this.getEmailValue}
                  checkIfCustomerEmailIsValid={this.checkIfCustomerEmailIsValid}
                  emailValidation={this.state.emailValidation}
                  disableEmailValidation={this.state.disableEmailValidation}
                  toggleDisableInput={this.toggleDisableInput}
                  removeEmailValidationError={this.removeEmailValidationError}
                /&gt;
              &lt;/Section&gt;
              &lt;Section title="Account Information"&gt;
                &lt;AccountDetails /&gt;
              &lt;/Section&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;Section title="Existing Services"&gt;
                &lt;ExistingServices services={services} /&gt;
              &lt;/Section&gt;
            &lt;/div&gt;
          &lt;/SectionRow&gt;
          &lt;Row gutter={48}&gt;
            &lt;Col span={24}&gt;
              &lt;StyledFiltersSection title="Filters"&gt;
                &lt;OfferBundlesFilters
                  filters={filters}
                  onFilterChange={updateFilter}
                /&gt;
              &lt;/StyledFiltersSection&gt;
            &lt;/Col&gt;
          &lt;/Row&gt;
          &lt;Row gutter={48}&gt;
            &lt;Col span={24}&gt;
              &lt;Section title="Offers"&gt;
                &lt;OfferBundlesTable
                  columns={offerColumns}
                  bundles={offers}
                  viewedOfferIds={[selectedOffer.OfferId]}
                  onBundleSelect={this.handleSelectOffer}
                /&gt;
              &lt;/Section&gt;
            &lt;/Col&gt;
          &lt;/Row&gt;
        &lt;/Fragment&gt;
      )
    }
  }
  
  const mapStateToProps = state =&gt; ({
    customer: state.customer.details,
    offers: state.offers.all,
    offerColumns: state.offers.tableColumns,
    selectedOffer: state.offers.selectedOffer,
    filters: Object.values(state.offers.filters),
    services: state.offers.services,
    pages: state.navigation
  })
  
  const mapDispatchToProps = {
    getOffers: actions.getOffers,
    selectOffer: actions.selectOffer,
    updateFilter: actions.updateOfferFilters,
    updateCustomer: actions.updateCustomer
  }
  
  OffersPage.propTypes = {
    customer: PropTypes.object,
    filters: PropTypes.arrayOf(PropTypes.object),
    updateFilter: PropTypes.func.isRequired,
    updateCustomer: PropTypes.func.isRequired,
    getOffers: PropTypes.func.isRequired,
    offers: PropTypes.arrayOf(PropTypes.object),
    offerColumns: tableColumnProps,
    selectOffer: PropTypes.func.isRequired,
    selectedOffer: PropTypes.object,
    services: PropTypes.object,
    location: PropTypes.object,
    history: PropTypes.object
  }
  
  OffersPage.defaultProps = {
    customer: null,
    offers: []
  }
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(OffersPage)
  
  </code></pre>
  
  <p><code>Child Component</code></p>
  
  <pre><code>import React from 'react'
  import PropTypes from 'prop-types'
  import styled from 'styled-components'
  import {
    Col, Row, Icon, Input, Tooltip
  } from 'antd'
  import Checkbox from '../elements/Checkbox'
  import Markup from '../core/Markup'
  
  const CustomerDetails = ({
    customer,
    checkIfCustomerEmailIsValid,
    emailValidation,
    toggleDisableInput,
    disableEmailValidation,
    removeEmailValidationError
  }) =&gt; {
    const { contact = {}, account = {}, site = {} } = customer || {}
    const [inputValue, setInputValue] = React.useState(contact.email)
  
    function onBlur(e) {
      checkIfCustomerEmailIsValid(e.target.value)
    }
  
    function clearInput() {
      setInputValue('')
    }
  
    function handleInputChange(event) {
      setInputValue(event.target.value)
    }
  
    return (
      &lt;Container&gt;
          &lt;Row&gt;
            &lt;Col span={10}&gt;
              &lt;h4&gt;
                PRIMARY CONTACT EMAIL &amp;nbsp;
              &lt;/h4&gt;
            &lt;/Col&gt;
          &lt;/Row&gt;
          &lt;Row&gt;
        &lt;Row&gt;
          &lt;Col span={8}&gt;
            &lt;StyledInput
              value={inputValue}
              onChange={handleInputChange}
              disabled={disableEmailValidation}
              onBlur={onBlur}
              isError={!emailValidation.isValid}
            /&gt;
            {!emailValidation.isValid &amp;&amp; (
              &lt;ErrorDiv&gt;{emailValidation.validationError}&lt;/ErrorDiv&gt;
            )}
          &lt;/Col&gt;
          &lt;Col span={2} /&gt;
          &lt;Col span={8}&gt;
            &lt;StyledCheckbox
              onChange={handleOptOut}
              checked={disableEmailValidation}
              isError={!emailValidation.isValid}
            /&gt;{' '}
            EMAIL OPT OUT{' '}
          &lt;/Col&gt;
        &lt;/Row&gt;
      &lt;/Container&gt;
    )
  }
  
  CustomerDetails.propTypes = {
    customer: PropTypes.object,
    emailValidation: PropTypes.object,
    checkIfCustomerEmailIsValid: PropTypes.func,
    toggleDisableInput: PropTypes.func
  }
  
  CustomerDetails.defaultProps = {
    customer: {}
  }
  
  
  const ErrorCheckbox = ({ isError, ...remainingProps }) =&gt; (
    &lt;Checkbox {...remainingProps} /&gt;
  )
  
  const ErrorInput = ({ isError, ...remainingProps }) =&gt; (
    &lt;Input {...remainingProps} /&gt;
  )
  
  const StyledCheckbox = styled(ErrorCheckbox)`
    &amp;&amp;&amp; {
      background: white;
  
      input + span {
        width: 35px;
        height: 35px;
        border: 2px solid
          ${({ theme, isError }) =&gt;
      isError ? theme.colors.danger : theme.colors.black};
      }
  
      input + span:after {
        width: 12.5px;
        height: 20px;
      }
  
      input:focus + span {
        width: 35px;
        height: 35px;
      }
    }
  `
  
  const StyledInput = styled(ErrorInput)`
    max-width: 100%;
    background: white;
  
    &amp;&amp;&amp; {
      border: 2px solid
        ${({ theme, isError }) =&gt;
      isError ? theme.colors.danger : theme.colors.black};
      border-radius: 0px;
      height: 35px;
    }
  `
  
  ErrorInput.propTypes = {
    isError: PropTypes.bool
  }
  
  ErrorCheckbox.propTypes = {
    isError: PropTypes.bool
  }
  
  const ErrorDiv = styled.div`
    color: #d11314;
  `
  
  const ErrorContainer = styled.div`
    span {
      text-align: center;
    }
  `
  
  export default CustomerDetails
  
  </code></pre>