adityatyagi

Ticket

Ticket ID: https://JIRA.com/ABC-1234

Description:

Added lazy loading in the app

Testing Steps:

1. Run the app
2. Open Google Dev Tools
3. Open different modules and when you do, keep a close eye on the network tabs. You'll see the request for new JS chunks for these modules going in real time i.e. on demand

adityatyagi

Ticket

Description:

Testing Steps:

Screenshots:

Required Checklist

adityatyagi

// it has the job to return the object which defines all the dynamic segment values
// in this case, it should return all the meetupId
export async function getStaticPaths()
// fetch all the meetupId present from the database
// returns an object / version of the page
// every object has a params object which holds key-value pairs to route params and their possible values
  return {
    true: false, // indicating that we have added all supported paths here
    paths: [
      {

adityatyagi

// Button 1  
const updateLoading = () => {
    setIsLoading(true);
    // ...
    // state is not updated here
    // ...
    setIsLoading(false);
    // ...
    // state is not updated here
    // ...

adityatyagi

// App.js
...
...
...
const [isLoading, setIsLoading] = useState(false);
// Button 1  
const updateLoading = () => {
    setIsLoading(true);
    setIsLoading(false);
    // setting isLoading to "true" at last

adityatyagi

// a sorting function that has some complex sorting algorithm
const sortedItems = useMemo(() => {
  return items.sort((a,b) => {
    // some elaborate sorting algorithm
    return a-b;
  });
}, [items])

adityatyagi

// DemoOutput.js
import React from "react";
const DemoOutput = (props) => {
  // a sorting function that has some complex sorting algorithm
const sortedItems = props.items.sort((a,b) => {
  // some elaborate sorting algorithm
  return a-b;
})

  return (

adityatyagi

// App.js (parent component)
...
...
...
  // this function is NOT re-created on ever re-execution of this function
  const onDemoClick = useCallback(() => {
    console.log("Demo click function invoked");
  }, []);
  return (
    <div>

adityatyagi

// in App.js (Parent component)
...
...
...
 // this function is re-created on ever re-execution of this function
  const onDemoClick = () => {
    console.log('Demo clicked!');
  }
  return (
    <div>

adityatyagi

import React from "react";
const DemoOutput = (props) => {
  console.log("Demo runs");
  return (
    <div>
      <h3>This is demo output component and will remain static</h3>
      <p>{props.show ? "Only this will render" : ""}</p>
    </div>
  );
};