---
title: Exploring Conditional Execution of React Hooks
slug: conditional-react-hooks
description: Discover how to conditionally execute React Hooks for more flexible functionality in your React applications
tags: [react, hooks, components]
publishedAt: 2023-10-03T00:00:00.000Z
ogImage: null
---

React hooks can't be called conditionally (see the [rules of hooks](https://react.dev/warnings/invalid-hook-call-warning#:~:text=Do%20not%20call%20Hooks%20inside%20conditions%20or%20loops.)). Except for the `use()` hook, which is [experimental](https://react.dev/reference/react/use) unless you're using Next.js 13. However, we can work around this in two different ways:

## Component approach

React is all about components, and hooks get executed inside components. We can conditionally render components. Put your hook inside a component and call it a day.


```tsx
function Parent() {
  const [shouldExecuteHook, setShouldExecuteHook] = useState(false)

  return (
    <>
      {shouldExecuteHook ? <ChildHook /> : null}

      <button onClick={() => setShouldExecuteHook(current => !current)}>
        Toggle
      </button>
    </>
  );
}

function ChildHook() {
  useEffect(() => {
    console.log('The hook is mounted!');

    return () => {
      console.log('The hook is unmounted!');
    }
  }, [])

  return null;
}
```

This is useful when you don't have control over the hook's implementation or don't want to update it to support a disabled/enabled flag.

## Disabled/Enabled flag

If we have control over the implementation of the hook, you could add a `disabled` or `enabled` flag to its input API, which we can use to control what happens when it executes.

Note that this example doesn't prevent the hook and the hooks used in its implementation from running. As you can see in the following example, what we do to prevent the hook from doing what it's supposed to do is check the flag and return early if the hook is disabled. That's because the `useEffect` hook will still run. 

```tsx
function useMyHook(disabled: boolean) {
  useEffect(() => {
    if (disabled) {
      return;
    }

    console.log('The hook is mounted!');

    return () => {
      console.log('The hook is unmounted!');
    }
  }, [enabled])
}

function Parent() {
  const [shouldExecuteHook, setShouldExecuteHook] = useState(false)

  useMyHook(shouldExecuteHook)

  return (
    <button onClick={() => setShouldExecuteHook(current => !current)}>
      Toggle
    </button>
  );
}
```

## Which one to pick?

Honestly, the experience will tell you because each hook is a different world. Maybe the following section with questions and answers helps you pick what you need:

### Questions and answers

#### Is this hook returning a value needed in the component where it's used?
Flag approach. [Here's an example from the famous `react-query` library](https://tanstack.com/query/v4/docs/react/reference/useQuery).

#### I have a hook from an external library, which I want to call conditionally. The hook is used to trigger a side effect.
Component approach. Here's a quick example use case for analytics.

```tsx
// External hook, will hook into React Router's location state and send events to Google Analytics
useRouterAnalytics()

// In our app, if our users don't consent to tracking, we can wrap this in a component
function RouterAnalytics() {
  useRouterAnalytics();

  return null;
}

// Then, we can conditionally use it on our app:
function AppComponent() {
  const enableTracking = ... get this from somewhere idk ...

  return (
    <>
      {enableTracking ? <RouterAnalytics /> : null}
      
      <OtherComponents />
    </>
  )
}
```

#### I followed the Component approach, but now I need to reset the state of the hook; what do I do?
`key` to the rescue, we're working with a React Component; we can use the `key` prop to reset its state. 

```tsx
function ConsoleLogCount() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(current => current + 1)
    }, 1000);

    return () => {
      clearInterval(interval);
    }
  }, []);

  useEffect(() => {
    console.log(count);
  }, [count]);

  return null;
}

function AppComponent() {
  const enableCount = ... get this from somewhere idk ...
  const [resetCountKey, setResetCountKey] = useState(0)

  return (
    <>
      {enableCount ? <ConsoleLogCount key={resetCountKey} /> : null}

      <button onClick={() => setResetCountKey(key => key + 1)}>
        Reset count
      </button> 
      
      <OtherComponents />
    </>
  )
}
```

---

Hope you liked the article! If you have more questions, feel free to reach out on social media or email :)

Discover how to conditionally execute React Hooks for more flexible functionality in your React applications

Exploring Conditional Execution of React Hooks

---
title: "Use React Native Web's Pressable with Remix's Link magic" 
slug: remix-react-native-pressable-release-v1
description: You can now use remix-react-native-pressable and forget about the Link component if you're using React Native Web with Remix!
tags: [react, remix, react-native]
publishedAt: 2022-02-19
ogImage: null
---

I just released [`remix-react-native-pressable`](https://github.com/HorusGoul/remix-react-native-pressable), a small package that allows you to use React Native Web's `<Pressable>` component with all of Remix's `<Link>` properties and magic.

Essentially, it implements the same logic Remix uses in their `<Link>`, but adapted to React Native Web's `<Pressable>` props.

Here's a little example using the `to` property:

```tsx
import { View, Text } from 'react-native';
import { RemixPressable } from 'remix-react-native-pressable';

export default function MyRemixRoute() {
  return (
    <View>
      <RemixPressable to="/about">
        <Text>Link to /about</Text>
      </RemixPressable>
    </View>
  );
}
```

Just like that, you get a link rendered using `<RemixPressable>`. The main benefit of this is that you can now use this component like any other React Native Web's `<Pressable>` you have in your app.

Here's another example (extracted from my website's rewrite!), in which you can see another way of using this library. I have a design system with a Button that uses `<Pressable>` in its implementation, but the design system is platform agnostic, so it doesn't know about Remix. For cases like this, we can use the `<RemixPressableChildren>` component to get the props we need to pass to the platform-agnostic `<Button>`. 

```tsx
import { RemixPressableChildren } from 'remix-react-native-pressable';
import { Button } from 'ui/lib/Button';

...

export default function Index() {
  ...

  return (
    <>
          <RemixPressableChildren to="/blog">
            {(pressableProps) => (
              <Button {...pressableProps}>More publications</Button>
            )}
          </RemixPressableChildren>
    </>
  );
} 
```

Now that you've seen how `<RemixPressable>` works, here are both the repository and its npm page:

- [github.com/HorusGoul/remix-react-native-pressable](https://github.com/HorusGoul/remix-react-native-pressable)
- [npmjs.com/package/remix-react-native-pressable](https://www.npmjs.com/package/remix-react-native-pressable)

Also, I recently published an article about [How to Setup React Native Web in a Remix project](https://horus.dev/blog/react-native-web-remix-setup). If you're interested in using React Native with Remix, that's probably the best resource to get started!

---

I hope you liked this article! Don't forget to follow me on Twitter if you want to know when I publish something new about web development: [@HorusGoul](https://twitter.com/HorusGoul)



You can now use remix-react-native-pressable and forget about the Link component if you're using React Native Web with Remix!

Use React Native Web's Pressable with Remix's Link magic

---
title: How to Setup React Native Web in a Remix project 
slug: react-native-web-remix-setup
description: Easy way to use React Native components in your Remix projects and reuse code
tags: [react, remix, react-native]
publishedAt: 2022-02-07
ogImage: https://horus-dev-media.s3.amazonaws.com/1bc3b4fc-9626-44e2-a7b6-b7541f77daa1
---

I assume you're here because you want to know how to set up React Native Web in your Remix project. Well, you're lucky, I had to do this a few days ago, and I haven't run into trouble with it yet, so here's a tutorial about it:

**Let's get started!**

_The result of this tutorial is also available as a GitHub repository that you can just clone to get started with your project: [https://github.com/HorusGoul/remix-react-native-web-starter](https://github.com/HorusGoul/remix-react-native-web-starter)_

## 1. Installing the react-native-web package

The first thing you have to do is install the `react-native-web` package. However, since we can't customize our build process because Remix doesn't allow it yet, we'll need to use a package manager that will enable you to install a package with an alias. In this case, I decided to use `pnpm`.

```bash
$ pnpm add react-native@npm:react-native-web
```

Then, the types if you're using TypeScript. Note that not all types will be correct for a React Native Web project, but that's out of the scope of this tutorial.

```bash
$ pnpm add --save-dev @types/react-native
```

## 2. React Native Web Styles

React Native Web has its own way of handling styles, and for SSR and hydration, they give you a stylesheet element that you have to place in the `<head>` of your page.

We'll pass that stylesheet element to our Root using the Context API. Let's do that by creating a `rn-styles.tsx` file inside the `app` folder. Here's the content for that file:

```tsx
import { createContext, useContext } from "react";

export const ReactNativeStylesContext =
  createContext<React.ReactElement<unknown> | null>(null);

export function useReactNativeStyles() {
  return useContext(ReactNativeStylesContext) ?? ReplaceWithStylesSSRTag;
}

export const ReplaceWithStylesSSRTag = <meta name="REPLACE_WITH_STYLES" />;
```

Now, let's move to the `app/root.tsx` file. We'll now use the `useReactNativeStyles()` hook and put the `stylesElement` inside the `<head>`. Also, we'll wrap the `<Outlet />` component with a View with a few properties to match the React Native Web behavior. 

```tsx
...

import { useReactNativeStyles } from "./rn-styles";
import { View, StyleSheet } from "react-native";

...

export default function App() {
  const stylesElement = useReactNativeStyles();

  return (
    <html lang="en">
      <head>
        ...

        {stylesElement}
      </head>
      <body>
        ...

        <View pointerEvents="box-none" style={styles.appContainer}>
          <Outlet />
        </View>

        ...
      </body>
    </html>
  );
}

const styles = StyleSheet.create({
  appContainer: {
    flex: 1,
  },
});
```

We also need to add a global stylesheet to Remix that contains the following. 

```css
html, body {
  height: 100%;
}

body {
  display: flex;
}
```

_Take a look at the [Remix Docs about Stylesheets](https://remix.run/docs/en/v1/guides/styling#regular-stylesheets) if you don't know how to add CSS in a Remix project._

## 3. SSR and Hydration

Assuming you haven't modified the `app/entry.client.tsx` file, just replace its contents with the following:

```tsx
import { RemixBrowser } from "@remix-run/react"";
import { hydrateRoot } from "react-dom/client";
import { AppRegistry } from "react-native";
import { ReactNativeStylesContext } from "./rn-styles";

const App = () => <RemixBrowser />;

AppRegistry.registerComponent("App", () => App);

// @ts-ignore
const { getStyleElement } = AppRegistry.getApplication("App");

hydrateRoot(
  document,
  <ReactNativeStylesContext.Provider value={getStyleElement()}>
    <App />
  </ReactNativeStylesContext.Provider>
);
```

What's going on with that code? We're using React Native Web `AppRegistry` to get the initial styles for the app and avoid hydration from failing.

Now, let's move to the `app/entry.server.tsx` file, where we'll do a similar thing. Take a look at the code:

```tsx
import { renderToString, renderToStaticMarkup } from "react-dom/server";
import { RemixServer } from "@remix-run/react"";
import type { EntryContext } from "@remix-run/node";
import { AppRegistry } from "react-native";
import { ReplaceWithStylesSSRTag } from "./rn-styles";

export default function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) {
  const App = () => <RemixServer context={remixContext} url={request.url} />;

  AppRegistry.registerComponent("App", () => App);

  let markup = renderToString(<App />);

  // @ts-ignore
  const { getStyleElement } = AppRegistry.getApplication("App", {});
  const stylesMarkup = renderToStaticMarkup(getStyleElement());

  markup = markup.replace(
    renderToStaticMarkup(ReplaceWithStylesSSRTag),
    stylesMarkup
  );

  responseHeaders.set("Content-Type", "text/html");

  return new Response("<!DOCTYPE html>" + markup, {
    status: responseStatusCode,
    headers: responseHeaders,
  });
}
```

This time, we're not passing the app styles using the ReactNativeStylesContext, but injecting them inside the markup by replacing a custom meta tag.

## 4. Using React Native Web components

One last thing you could do if you're doing this in a new project is to go ahead and replace your `app/routes/index.tsx` with the following:

```tsx
import { Text, View } from "react-native";

export default function Index() {
  return (
    <View>
      <Text>Hello, world!</Text>
    </View>
  );
}
```

Then do `pnpm dev` and open your project in the browser to see your first Remix route rendered with React Native Web components!

---

I hope you liked this article! Don't forget to follow me on Twitter if you want to know when I publish something new about web development: [@HorusGoul](https://twitter.com/HorusGoul)



Easy way to use React Native components in your Remix projects and reuse code

Horus Lugo

Where to find me

Latest articles

Exploring Conditional Execution of React Hooks

Use React Native Web's Pressable with Remix's Link magic

How to Setup React Native Web in a Remix project

Showcase

Atom - Periodic Table & Tests