Skip to content

Instantly share code, notes, and snippets.

Avatar

Aditya Tyagi adityatyagi

View GitHub Profile
View PULL_REQUEST_TEMPLATE.md

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
View PULL_REQUEST_TEMPLATE.md

Ticket

Description:

Testing Steps:

Screenshots:

Required Checklist

View App.js
// 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: [
{
View App.js
// Button 1
const updateLoading = () => {
setIsLoading(true);
// ...
// state is not updated here
// ...
setIsLoading(false);
// ...
// state is not updated here
// ...
View App.js
// App.js
...
...
...
const [isLoading, setIsLoading] = useState(false);
// Button 1
const updateLoading = () => {
setIsLoading(true);
setIsLoading(false);
// setting isLoading to "true" at last
View DemoOutput.js
// 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])
View DemoOutput.js
// 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 (
View App.js
// 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>
View App.js
// 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>
View DemoOutput.js
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>
);
};