Ingap.dev - A Personal Dev Blog

Developing applications with ReactJS, CSS, and Ionic can sometimes be tricky on simple stuffs. Here are some common pitfalls and tips on how to avoid them.

General Advices

• Memoization: Use `useMemo` to prevent unnecessary re-renders.
• Callback Dependencies: Always check the dependency array in `useCallback` or `useEffect` to ensure it reacts to the correct data updates.

Avoiding these common pitfalls will help ensure that your web applications are robust, responsive, and maintain high performance.

Specific Time-Wasting Scenarios That Are Easily Managed

I'll make an effort to keep this list up-to-date, ensuring it remains a valuable and relevant resource.

Ensuring Content Wraps Correctly

To ensure items wrap onto multiple lines if they run out of space, combine `display: 'flex'` with `flexWrap: 'wrap'`. This is crucial for responsive design.

Properly Scaling Images to Fit Containers

To fit an image within its container without overflow while maintaining its aspect ratio, use:

.img-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

Ensure the container has specified dimensions or is controlled by its parent's dimensions.

Handling Prop Changes with State

When props change and are assigned to state via useState, remember that these states do not automatically trigger re-renders. Use `useEffect` to sync state with props:

useEffect(() => {
  setShowAlert(isOpen);
}, [isOpen]);

To force a re-render when data changes, utilize keys effectively in your components:

<div key=`${doUpdate}-${index}`>

State Updates are Asynchronous!

Keep in mind that state updates don't happen instantly—they're asynchronous. To make sure you're always working with the latest state, pass a function to setState rather than a direct value.

setCellStates(prevCellStates => {...});

Should I use 'onIonInput' or 'onIonChange'?

Use `onIonInput` for real-time data capture, not `onIonChange`, which only triggers after the component loses focus.