SolidJS is a modern JavaScript library that emphasizes fine-grained reactivity and minimal overhead. One of its powerful features is the ability to create custom hooks, which allow developers to encapsulate reusable logic and improve application performance. This article explores how to create custom hooks in SolidJS to enhance your app's reusability and efficiency.

Understanding Custom Hooks in SolidJS

In SolidJS, custom hooks are functions that leverage reactive primitives like createSignal, createEffect, and createMemo to encapsulate stateful logic. Unlike React, SolidJS's hooks are not tied to component lifecycle methods but are instead functions that can be reused across components to manage complex behaviors efficiently.

Creating a Basic Custom Hook

To create a custom hook in SolidJS, define a function that returns reactive data and any necessary functions. For example, a simple hook to manage a toggle state can be written as follows:

import { createSignal } from 'solid-js';

function useToggle(initialValue = false) {
  const [state, setState] = createSignal(initialValue);
  const toggle = () => setState(!state());
  return [state, toggle];
}

export default useToggle;

This hook provides a reactive boolean state and a function to toggle its value. It can be reused in any component that requires toggle functionality, promoting code reusability and clarity.

Advanced Custom Hook: Fetching Data

Custom hooks can also handle more complex logic, such as data fetching. Here's an example of a hook that fetches data from an API and manages loading and error states:

import { createSignal, createEffect } from 'solid-js';

function useFetch(url) {
  const [data, setData] = createSignal(null);
  const [loading, setLoading] = createSignal(true);
  const [error, setError] = createSignal(null);

  createEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(json => {
        setData(json);
        setLoading(false);
      })
      .catch(err => {
        setError(err);
        setLoading(false);
      });
  });

  return { data, loading, error };
}

export default useFetch;

This hook simplifies data fetching across components, ensuring consistent handling of loading and error states, and reducing repetitive code.

Optimizing Performance with Custom Hooks

SolidJS's reactivity system allows custom hooks to optimize performance by minimizing unnecessary computations. Using createMemo within hooks can cache expensive calculations and only update when dependencies change.

Example: Memoized Filtering

Suppose you want to filter a list based on user input. A custom hook can memoize the filtered list to avoid recalculating on every render:

import { createSignal, createMemo } from 'solid-js';

function useFilteredList(items, filterText) {
  const filtered = createMemo(() =>
    items().filter(item => item.includes(filterText()))
  );
  return filtered;
}

export default useFilteredList;

This approach ensures the filtering logic runs only when the list or filter text changes, improving app responsiveness.

Conclusion

Creating custom hooks in SolidJS empowers developers to write cleaner, more maintainable, and efficient code. By encapsulating complex logic and leveraging SolidJS's reactive primitives, these hooks enhance reusability and performance across your applications. Experiment with different patterns to find what best suits your project needs.