In the previous lesson, you learned how to pass data from a parent component to a child component using props. This is a powerful way to share information between components, but what if the child component needs to communicate back to the parent? This is where callback functions come into play.

A callback function is a function passed from a parent component to a child component, allowing the child to "call back" to the parent when a specific event occurs. Think of it like this: the parent component (the manager) gives the child component (the employee) a task (the callback function) to execute. When the child completes the task, it notifies the parent by calling the function.

In this lesson, you’ll learn how to pass callback functions as props and use them to enable communication between parent and child components. This builds on your knowledge of props and takes component communication to the next level.

To pass a callback function as a prop, you first define the function in the parent component. Then, you pass it to the child component just like any other prop. Let’s start with a simple example where the parent passes a console.log function to the child.

svelte
Copy to clipboard
1<!-- Parent.svelte -->
2<script>
3  import Child from './Child.svelte';
4
5  function logMessage(message) {
6    console.log(message);
7  }
8</script>
9
10<Child logHandler={logMessage} />

svelte
Copy to clipboard
1<!-- Child.svelte -->
2<script>
3  let { logHandler } = $props();
4</script>
5
6<button onclick={() => logHandler("Hello from child!")}>
7  Click Me
8</button>

In this example:

• The parent component defines a logMessage function that logs a message to the console.
• The parent passes this function to the child component as a prop named logHandler.
• The child component receives the logHandler prop and uses it in an onclick event. When the button is clicked, the child calls logHandler with the message "Hello from child!".

When you run this code and click the button, the message "Hello from child!" will appear in the console. This demonstrates how a child component can trigger a function defined in the parent component.

Now that you know how to pass a callback function as a prop, let’s explore how to trigger it in the child component. In Svelte, you can use events like onclick to call the callback function when a specific action occurs.

Here’s an example where the child component triggers the parent’s callback function when a button is clicked:

svelte
Copy to clipboard
1<!-- Parent.svelte -->
2<script>
3  import Child from './Child.svelte';
4
5  function handleClick(message) {
6    console.log(message);
7  }
8</script>
9
10<Child clickHandler={handleClick} />

svelte
Copy to clipboard
1<!-- Child.svelte -->
2<script>
3  let { clickHandler } = $props();
4</script>
5
6<button onclick={() => clickHandler("Button clicked in child!")}>
7  Click Me
8</button>

In this example:

• The parent component defines a handleClick function that logs a message to the console.
• The parent passes this function to the child component as a prop named clickHandler.
• The child component receives the clickHandler prop and uses it in an onclick event. When the button is clicked, the child calls clickHandler with the message "Button clicked in child!".

When you run this code and click the button, the message "Button clicked in child!" will appear in the console. This shows how the child component can notify the parent component of an event by calling the callback function.

Let’s put everything together in a practical example: a counter app. In this app, the parent component manages the counter state, and the child component increments the counter when a button is clicked.

svelte
Copy to clipboard
1<!-- App.svelte -->
2<script>
3  import Child from './Child.svelte';
4  let counter = $state(0);
5
6  function incrementCounter(message) {
7    counter++;
8    console.log(message);
9  }
10</script>
11
12<h1>Counter: {counter}</h1>
13<Child clickHandler={incrementCounter} />

svelte
Copy to clipboard
1<!-- Child.svelte -->
2<script>
3  let { clickHandler } = $props();
4</script>
5
6<button onclick={() => clickHandler("Counter incremented from Child!")}>
7  Press Me
8</button>

In this example:

• The parent component (App.svelte) manages the counter state using the $state rune.
• The parent defines an incrementCounter function that increments the counter and logs a message to the console.
• The parent passes this function to the child component as a prop named clickHandler.
• The child component receives the clickHandler prop and uses it in an onclick event. When the button is clicked, the child calls clickHandler with the message "Counter incremented from Child!".

When you run this code and click the button, the counter will increment, and the message "Counter incremented from Child!" will appear in the console. This demonstrates how a child component can trigger a function in the parent component to update the parent’s state.

When working with callback functions as props, there are a few common pitfalls to avoid and best practices to follow:

• Forgetting to Pass the Callback Function
  Ensure that the parent component passes the callback function to the child component. If the prop is missing, the child won’t be able to call the function.

• Incorrect Function Binding
  If the callback function relies on this, make sure it’s bound correctly. In Svelte, this is less of an issue since functions are typically defined in the script context.

• Best Practices

  • Use descriptive names for callback functions and props to make your code more readable.
  • Keep callback functions focused on a single task to maintain clarity and reusability.
  • Avoid overloading child components with too many callback functions. Instead, group related actions into a single function if possible.

In this lesson, you learned how to use callback functions as props to enable communication between parent and child components. You explored how to pass a function from a parent to a child, trigger it in the child component, and use it to update the parent’s state. This builds on your knowledge of props and takes component communication to the next level.

In the practice exercises, you’ll apply these concepts by:

• Modifying the counter app to add more functionality.
• Creating a new app where a child component sends data back to the parent.

These exercises will help you solidify your understanding of callback functions and prepare you for more advanced topics in Svelte. Great job so far—keep up the good work!