How do functions/objects get invoked in react?

Question

I build a site where the user can input a shipping adress looking like this

I still dont understand how the code gets invoked. I have a router where the file itself gets invoked when the user pasts the url "/shipping". But the code doesent invoke the function itself. With that i mean there is nothing like "shippingAdressScreen();" like i know it from java.

Is this dont needed in JS? And if so, why do we gave this function a name and why is it exported? The function is not imported somewhere else.

the code is the following one:

Router:

{
    path: SHIPPING_PAGE,
    component: Loadable({
      loader: () =>
        import(/* webpackChunkName: "Pricing" */ './container/Cart/ShippingAdressScreen.js'),
      loading: Loading,
      modules: ['Products'],
    }),
  },

ShippingAdressScreen

import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { saveShippingAddress } from '../../frontend/actions/cartActions';
import CheckoutSteps from '../Cart/CheckOutSteps';
import './index.css'

export default function ShippingAddressScreen(props) {
  const cart = useSelector(state => state.cart)
  const {shippingAddress} = cart;
  
  const [fullName, setFullName] = useState(shippingAddress.fullName || '');
  const [address, setAddress] = useState(shippingAddress.address || '');
  const [city, setCity] = useState(shippingAddress.city || '');
  const [postalCode, setPostalCode] = useState(shippingAddress.postalCode || '');
  const [country, setCountry] = useState(shippingAddress.country || '');
  const dispatch = useDispatch();


  // login form submithandler
  const submitHandler = (e) => {
    e.preventDefault();
    dispatch(saveShippingAddress({fullName, address, city, postalCode, country}))
    props.history.push('/payment')
  };

  return (
    <div className = "poscss">
      <CheckoutSteps step1 step2></CheckoutSteps>
      <form className="form" onSubmit={submitHandler}>
        <div>
          <h1>Shipping Address</h1>
        </div>
        <div>
          <label htmlFor="fullName">Full Name</label>
          <input
            type="text"
            id="fullName"
            placeholder="Enter full name"
            value={fullName}
            onChange={(e) => setFullName(e.target.value)}
            required
          ></input>
        </div>
        <div>
          <label htmlFor="address">Address</label>
          <input
            type="text"
            id="address"
            placeholder="Enter address"
            value={address}
            onChange={(e) => setAddress(e.target.value)}
            required
          ></input>
        </div>
        <div>
          <label htmlFor="city">City</label>
          <input
            type="text"
            id="city"
            placeholder="Enter city"
            value={city}
            onChange={(e) => setCity(e.target.value)}
            required
          ></input>
        </div>
        <div>
          <label htmlFor="postalCode">Postal Code</label>
          <input
            type="text"
            id="postalCode"
            placeholder="Enter postal code"
            value={postalCode}
            onChange={(e) => setPostalCode(e.target.value)}
            required
          ></input>
        </div>
        <div>
          <label htmlFor="country">Country</label>
          <input
            type="text"
            id="country"
            placeholder="Enter country"
            value={country}
            onChange={(e) => setCountry(e.target.value)}
            required
          ></input>
        </div>
        <div>
          <label htmlFor="chooseOnMap">Location</label>
          <button type="button" >
            Choose On Map
          </button>
        </div>
        <div>
          <label />
          <button className="primary" type="submit">
            Continue
          </button>
        </div>
      </form>
    </div>
  );
}

Edit:

const App = () => (
  <ThemeProvider theme={theme}>
    <>
      <GlobalStyles />              
      <BrowserRouter>              
         <AuthProvider>            
          <Routes />
        </AuthProvider>
      </BrowserRouter>
    </>
  </ThemeProvider>
);

ReactDOM.render(
  <Provider store ={store}>
    <App/>
  </Provider>,
  document.getElementById('root')
);

The above route get called inside const App, which is rendered using RractDOM.render(). Is this the point where the magic happens?

Answer 1

ShippingAddressScreen is exported from the module it is defined in.

Then there is a function (() => import....) which imports it (asynchronously).

That gets passed (as a property of an object) to Loader

… and Loadable is (possibly) responsible for calling it.