Notes on Tech
1. Next.js, Prisma, and Supabase
Remember to configure both DIRECT_URL and DATABASE_URL for proper database connections.
2. Web Development Tips
Avoid document-wide listeners:
Example: Setting a wrong expectation to collapse a side drawer could lead to performance issues.
onMouseDown vs. onClick:
onMouseDown is triggered earlier than onClick.
If you attempt to stop event propagation from onMouseDown to onClick, it will fail.
Avoid unnecessary setState:
If a default value suffices, don't use setState unnecessarily.
Use pointer-events-none:
This allows clicks to pass through high z-index elements to interact with elements underneath.
router.push does not ensure updated states:
Use window.location.href to hard reload a page and ensure the latest data is retrieved.
Stateful components:
A component should manage state if:
- It is the top parent of a URL path.
- It needs to generate a table.
3. Debugging Tips
- Bug fixes for false values: If a component cannot accept false and yields errors, separate that component into its own file and export it.
- Empty arrays are not false: Use array.length === 0 to check if an array is empty.
- Accessing Axios response data: Use response.data to extract response data.
- Compare times correctly: Use getTime() before comparing two time objects.
4. Tailwind CSS
Classes like w-[${variable}px] are not picked up in production builds.
Use the style attribute for dynamic styling.
5. React Tips
- Prevent Infinite Loops: Avoid using setState inside useEffect without a dependency array to prevent infinite loops.
- React Table Functions: Functions defined in column definitions cannot access the current state, which can lead to unexpected behaviors.
- Handling Overlapping Events: Replace onClick with onMouseDown for interactions where onBlur and onClick overlap (e.g., clicking on a list item while leaving another element).
6. Time Management
- Creating a DateTime object using new Date("...") adjusts to UTC.
- getDate and similar methods return the local timezone value.
- Remember, servers don't inherently know a user's timezone.
7. Useful Libraries
React Libraries:
- react-beautiful-dnd: Drag-and-drop functionality.
- cookie-next: Cookie management.
- react-copy-to-clipboard: Copy-paste functionality.
- react-icons: Icon library.
- react-timeago: Display time in "ago" format.
- next-auth: Authentication.
- bcrypt: Encryption.
- prisma: ORM.
For Map-Based Apps:
- leaflet.js: Canvas, polygon, latitude, longitude.
- react-google-autocomplete: Place suggestions with built-in debouncing.
Detecting Outside Clicks:
Use the DOM contains method to check if a click event occurs within a container.
8. Miscellaneous Tips
- Handling State and Events Together: Be mindful of overlapping event behaviors like onBlur triggering before onClick.
- Debugging React Table: Ensure state-dependent functions in column definitions are correctly designed to avoid confusion.