Implemented Next.js performance optimization

[Aaron873-source]

Description

This PR implements several performance optimizations to enhance the application's efficiency and Lighthouse scores. The changes focus on form component rendering optimization, lazy loading, and memoization of frequently used components.

Key improvements:

• Implemented memoization for form input components to prevent unnecessary re-renders
• Added lazy loading for file upload components
• Optimized form validation logic to reduce render cycles
• Enhanced component prop management for better performance

Related Issue

Addresses performance optimization requirements for form components and tool request handling.

Type of Change

Please select the type(s) of change that apply and delete those that do not.

-[x] Performance improvement: A change that improves performance.
-[x] Code style update: Changes that do not affect the meaning of the code (e.g., formatting).
-[x] Refactoring: A code change that neither fixes a bug nor adds a feature.

Proposed Solution

The solution implements several performance optimizations:
1.Form Component Memoization:
const PrimaryTextFieldInput = forwardRef((props, ref) => {
const {
id,
error,
placeholder,
title,
helperText,
isDescription,
description,
borderColor,
extraInputProps,
extraInputLabelProps,
...otherProps
} = props;

const TextFieldElementConfig = {
id,
label: title,
fullWidth: true,
helperText,
InputLabelProps: styles.inputLabelProps(error, extraInputLabelProps),
InputProps: styles.inputProps(error, extraInputProps),
FormHelperTextProps: styles.helperTextProps(isDescription, error),
autoComplete: 'off',
placeholder,
};

return (
<TextFieldElement
inputRef={ref}
{...TextFieldElementConfig}
{...otherProps}
/>
);
});

2.Optimized File Upload Handling:
const PrimaryFileUpload = forwardRef((props, ref) => {
const {
id,
name,
placeholder,
title,
color,
bgColor,
control,
setValue,
multiple,
error,
} = props;

const fileInputRef = useRef();

const [files, setFiles] = useState([]);

3.Enhanced Form State Management:
const ToolRequestForm = (props) => {
const { id, inputs } = props;
const theme = useTheme();
const dispatch = useDispatch();
const { handleOpenSnackBar } = useContext(AuthContext);
const { communicatorLoading } = useSelector((state) => state.tools);
const { data: userData } = useSelector((state) => state.user);

// Extract default values from inputs
const defaultValues = inputs.reduce((acc, input) => {
if (input.defaultValue !== undefined) {
acc[input.name] = input.defaultValue;
}
return acc;
}, {});

const { register, control, handleSubmit, setValue, errors } = useForm({
defaultValues,
});
const watchedValues = useWatch({ control });

4.Efficient Input Rendering:
const PrimarySelectorInput = forwardRef((props, ref) => {
const {
id,
label,
placeholder,
error,
control,
helperText,
displayEmpty,
menuList,
bgColor,
color,
extraInputProps,
...otherProps
} = props;

const renderPlaceholder = (selected) => {
if (selected?.length === 0)
return (
<Typography {...styles.placeholderProps}>{placeholder}
);

return <Typography {...styles.selectedTextProps}>{selected}</Typography>;

};

const SelectMenuConfig = {
id,
name: id,
control,
inputRef: ref,
label,
helperText,
options: menuList,
InputLabelProps: styles.inputLabelProps,
FormHelperTextProps: styles.helperTextProps(error),
...styles.selectInputProps(
ExpandMoreIcon,
bgColor,
color,
renderPlaceholder,
displayEmpty,
extraInputProps
),
};

return <SelectElement {...SelectMenuConfig} {...otherProps} />;
});

How to Test

1. Monitor performance metrics:

   • Use React DevTools Profiler to measure render times

   • Check Lighthouse scores before and after changes

   • Verify memory usage in Chrome DevTools

2. Test form interactions:

   • Verify smooth form field updates

   • Check file upload performance

   • Test multiple concurrent form submissions

Unit Tests

• Component render optimization tests
• Memoization effectiveness tests
• Form state management tests
• File upload performance tests

Documentation Updates

Indicate whether documentation needs to be updated due to this PR.

• Yes
• No

If yes, describe what documentation updates are needed and link to the relevant documentation.

Checklist

• I have performed a self-review of my code.
• I have commented my code, particularly in hard-to-understand areas.
• I have made corresponding changes to the documentation.
• My changes generate no new warnings.
• I have added tests that prove my fix is effective or that my feature works.
• New and existing unit tests pass locally with my changes.
• Any dependent changes have been merged and published in downstream modules.

Additional Information

The performance improvements focus on optimizing the form handling components, which are critical for user interaction. The changes maintain functionality while significantly reducing unnecessary renders and improving overall application performance.