DEV Community: Stefan Simic

next js

Stefan Simic — Thu, 30 Jan 2025 17:50:10 +0000

Callback Refs vs. useEffect: When to use which

Stefan Simic — Wed, 29 Jan 2025 08:47:49 +0000

In React, managing side effects and interacting with the DOM are crucial aspects of component development. Two powerful tools for this are useEffect and callback refs. While useEffect is a versatile hook for handling various side effects, callback refs offer a more direct and potentially more performant approach in specific scenarios.

Understanding Callback Refs

Callback refs provide a way to access the actual DOM element directly within a functional component. You pass a callback function to the ref attribute of an element. This callback function receives the DOM element as an argument, allowing you to:

Directly manipulate the DOM: Set focus, resize elements, apply styles, and more.
Interact with third-party libraries: Integrate with libraries that work directly on DOM elements (e.g., map libraries, canvas libraries).

When to Use Callback Refs

Direct DOM Manipulation:
- When you need to set up or clean up DOM-related logic (e.g., focus management, resizing elements). -Callback refs provide direct access to the DOM element, allowing for precise and efficient manipulations.
Third-party Libraries:
- When initializing or interacting with libraries that work directly on DOM elements (e.g., integrating with a map library, handling canvas interactions). -Callback refs enable you to pass the DOM element directly to the library's API.
Avoiding Re-render Dependencies:
- When useEffect dependencies can cause unnecessary re-renders, potentially impacting performance.
- By using callback refs, you can avoid including the DOM element itself in the useEffect dependency array, reducing the number of re-renders

Example: Focus Management

import React, { useRef } from 'react';

function InputWithFocus() {
  const inputRef = useRef(null);

  const handleRef = (element) => {
    if (element) {
      element.focus();
    }
  };

  return <input type="text" ref={handleRef} />;
}

Scroll to Bottom Example

Callback Ref:

import React, { useState, useRef, useCallback } from 'react';

function Chat() {
  const [messages, setMessages] = useState([]);
  const messagesEndRef = useRef(null);

  const scrollToBottom = useCallback(() => {
    if (messagesEndRef.current) {
      messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });
    }
  }, [messages]); 

  const handleSendMessage = () => {
    setMessages([...messages, "New Message"]); 
    scrollToBottom(); 
  };

  return (
    <div style={{ height: '300px', overflowY: 'auto' }}>
      {messages.map((message, index) => (
        <div key={index}>{message}</div>
      ))}
      <div style={{ float: "left", clear: "both" }} 
           ref={messagesEndRef} /> 
    </div>
    <button onClick={handleSendMessage}>Send</button>
  );
}

useEffect:

import React, { useState, useEffect, useRef } from 'react';

function Chat() {
  const [messages, setMessages] = useState([]);
  const messagesEndRef = useRef(null);

  useEffect(() => {
    scrollToBottom();
  }, [messages]);

  const scrollToBottom = () => {
    if (messagesEndRef.current) {
      messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });
    }
  };

  const handleSendMessage = () => {
    setMessages([...messages, "New Message"]); 
  };

  return (
    <div style={{ height: '300px', overflowY: 'auto' }}>
      {messages.map((message, index) => (
        <div key={index}>{message}</div>
      ))}
      <div style={{ float: "left", clear: "both" }} 
           ref={messagesEndRef} /> 
    </div>
    <button onClick={handleSendMessage}>Send</button>
  );
}

Choosing the Right Approach

For direct DOM manipulations and when avoiding unnecessary re-renders is crucial, callback refs are generally preferred.
For simpler scenarios or when performance is not a primary concern, useEffect can be a suitable choice.

By understanding the strengths of both callback refs and useEffect, you can make informed decisions about how to manage side effects and interact with the DOM in your React components effectively.

🔥 Free Database & API in 10 Minutes

Stefan Simic — Tue, 28 Jan 2025 11:38:19 +0000

Start Your Free Database and API Service in Just 10 Minutes！🔥🔥🔥(With GitHub repository)

Daniel Jones ・ Dec 23 '24

#webdev #javascript #programming #tutorial

Supabase Workflows: From Dashboard to Git-Based Development

Stefan Simic — Tue, 28 Jan 2025 10:42:30 +0000

Supabase has been gaining a lot of love lately—and for good reason. It’s a powerful backend-as-a-service that combines Postgres, authentication, storage, and real-time capabilities, all wrapped in a developer-friendly package. If you’ve worked with Firebase before, Supabase can feel like a step up, especially if you’re excited about SQL and database-first development.

But as projects grow, so do the challenges. If you’ve ever found yourself hesitant to make changes because reverting feels risky, or struggling to keep track of row-level security (RLS) policies and database functions, you’re not alone. The good news? Supabase offers tools and workflows to handle these challenges—and they’re more powerful than you might think.

In this post, we’ll explore how to transition from using the Supabase dashboard for quick edits to adopting a Git-based, scalable workflow for serious development.

The Dashboard Dilemma

When starting out with Supabase, the dashboard feels intuitive and approachable. You can quickly create tables, define RLS policies, and even write functions. But as your project grows, this approach can get messy:

No Version Control: Changes made on the dashboard are hard to track, let alone revert.
Risky Changes: Touching production data or policies directly can lead to errors that are hard to debug.
Collaboration Issues: For teams, the lack of a proper workflow makes collaboration cumbersome.

The dashboard is perfect for prototyping, but for larger projects, you need something more robust.

Supabase’s Local Development Workflow

Here’s where Supabase CLI and local development come into play. Supabase offers a workflow that allows you to manage your database schema, policies, and migrations locally—all version-controlled in Git. This bridges the gap between rapid prototyping and professional development practices.

What You Can Do with the Supabase CLI:

Spin Up a Local Environment: Run a local version of Supabase (Postgres, Auth, etc.) on your machine.
Generate Migrations: Every change to your database schema can be captured as a migration file.
Test Safely: Experiment locally without touching production data.
Version Control Everything: Migrations, SQL functions, and even RLS policies can all live in Git.
Apply Migrations to Production: Confidently push changes to your live environment.

Getting Started:

Install the CLI: Follow Supabase’s guide to set up the CLI.
Set Up a Local Project: Use supabase start to spin up a local environment.
Make Changes Locally: Modify your schema, add RLS policies, or create functions.
Generate Migrations: Use supabase db diff to generate migration files.
Commit to Git: Track your changes just like you would with application code.
Deploy Changes: Use supabase db push to apply migrations to production.

Best Practices for Supabase Workflows

To get the most out of Supabase, adopt these best practices:

1. Organize Your SQL

Keep your database functions, triggers, and RLS policies modular and reusable. Store them in version-controlled .sql files and structure them logically—for example, separate folders for migrations, functions, and policies.

2. Leverage Git for Everything

Treat your database schema like application code. Version-control all changes to your schema, policies, and functions. This ensures your team can collaborate effectively and roll back changes when needed.

3. Test Locally Before Deploying

Never experiment on your production database. Use the local environment to test schema changes, functions, and policies. This minimizes the risk of breaking your app in production.

4. Track Your Workflow with Tools

While Supabase CLI is powerful, consider using additional tools to stay organized:

Notion or Trello: Document your policies, functions, and workflows.
Postico or DBeaver: Manage your database visually if needed.
CI/CD Pipelines: Automate the deployment of migrations to production.

5. Keep RLS Policies Simple

Row-Level Security is one of Supabase’s strongest features, but overly complex policies can be hard to debug. Start simple, test thoroughly, and build incrementally.

Common Pitfalls (and How to Avoid Them)

Skipping Local Testing: Always test your migrations and policies locally before deploying. It’s easy to overlook this step, but it can save you from production headaches.
Overcomplicating Policies: Avoid writing overly complex RLS policies upfront. Build policies iteratively, and document them well for clarity.
Relying Solely on the Dashboard: The dashboard is great for quick prototyping, but for larger projects, switch to a Git-based workflow sooner rather than later.

Conclusion

Supabase is more than just a Firebase alternative—it’s a robust backend platform that scales beautifully with the right workflow. By adopting Supabase CLI, local development, and a Git-based workflow, you can confidently build and grow your projects without fear of breaking production.

Ultimate Scaffolder for Next.js and Supabase development

Stefan Simic — Tue, 28 Jan 2025 09:59:56 +0000

Hey there, awesome devs! 👋 Are you tired of spending hours setting up your Next.js projects with Supabase and shadcn/ui? Well, I’ve got some exciting news for you! 🎉

Introducing the Next.js Supabase shadcn/ui Scaffolder
I’m thrilled to share a tool that’s going to make your life so much easier. Say hello to the Next.js Supabase shadcn/ui Scaffolder! This nifty package is designed to kickstart your Next.js projects with Supabase integration and shadcn/ui components in just a few minutes. No more tedious setup processes or configuration headaches!

What’s in the Box? 📦
Our scaffolder is packed with features to get you up and running in no time:

Next.js Setup: Get a fresh Next.js project ready to go.
Supabase Integration: Seamlessly connect your app to Supabase for all your backend needs.
shadcn/ui Components: Beautiful, accessible components at your fingertips.
TypeScript Support: Because who doesn’t love some type safety?
Flexible Routing: Choose between the classic Pages Router or the new App Router.
TailwindCSS Integration: Optionally include TailwindCSS for easy styling.
Environment Setup: Automatic configuration of your Supabase environment variables.

Getting Started is a Breeze🌬️

Ready to dive in? Here’s how you can get started:

Install the package globally:

npm install -g next-supabase-starter

Initialize project:

next-supabase init

next-supabase-starter

Code