Hugo is fast, but ineffecinet templates can make it slower. For checking the performance you can use the below commands.

• Use hugo --logLevel debug to display debug information, warning, and error message.

• Use hugo --templateMetrics to check for slow templates. This will show the time it takes to render each template.

• Use hugo --gc (garbage collection) to clean up unused files, which might help reduce build time.

• Use debug.Timer to determine the execution time of a block of code. And use the hugo --logLevel info info command line flag when you build the site.

{{ $t := debug.Timer "TestSqrt" }}
{{ range seq 2000 }}
  {{ $f := math.Sqrt . }}
{{ end }}
{{ $t.Stop }}

References

Hugo Docs

A higher order function is a function that takes one or more functions as arguments, or returns a function as its result.

These functions are powerful because they allow you to abstract and compose operations in a flexible and reusable way. They are a fundamental concept in functional programming.

Common examples of higher order functions are .map(), .filter(), and reducer().

.map(): Takes a function as an argument and applies it to each element in an array, returning a new array with the results.

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

References

Namaste JS, FreeCodeCamp

Below are the different types of states that can exist within an application. There are three main types:

1. Local State

Local state pertains to a single component. An example of this would be listening to user input in a field or toggling a “show more details” button. Typically, local state is managed within the component using useState or useReducer.

2. Cross-Component State

Cross-component state impacts multiple components. For instance, managing the open/closed state of a modal overlay. While this can also be managed using useState or useReducer, it often involves passing state between components via props drilling.

3. App-Wide State

App-wide state influences the entire application, such as themes or user authentication status. Similar to cross-component state, this can be managed using useState or useReducer, albeit with the assistance of props drilling.