---
title: React
description: Define root components, enable SSR, and more.
---

# React

## Getting started

Let's create a little app to demonstrate how to use [React](https://react.dev/) in flecks:

```
create-app react-test
```

We'll add the `web` and `react` flecks:

```
npx flecks add @flecks/web
npx flecks add @flecks/react
```

Finally, we'll create a fleck:

```
npx @flecks/create-fleck root
```

### Add a root component

Let's implement a hook to add a component to `@flecks/react` root components:

```js title="packages/root/src/index.js"
import Component from './component';

export const hooks = {
  '@flecks/react.roots': () => Component,
};
```

Let's also add our component source file:

```jsx title="packages/root/src/component.jsx"
import {React} from '@flecks/react';

function Component() {
  return <p>hello world (from React)</p>;
}

export default Component;
```

:::tip[Hey, where's my React?]

You may notice we imported `React` from `@flecks/react` instead of `react`. This is provided as a
convenience. flecks is a very dynamic system and it may also be possible to load multiple React
versions on your page.

Using `@flecks/react` makes sure your components are all using the same instance of `React`.

:::

Visit your website in your browser and you will see the hello world message!

:::tip[Server-Side Rendering (SSR)]

If you disable JavaScript in your browser and reload the page you will still see the message. This
is because **Server-Side Rendering (SSR) is enabled by default**! If you don't want this, update your
`build/flecks.yml`:

```yml title="build/flecks.yml"
'@flecks/core':
  id: react-test
// highlight-start
'@flecks/react':
  ssr: false
// highlight-end
'@flecks/server': {}
'@flecks/web': {}
'@react-test/root:./packages/root/src': {}
```

Now if you visit the page with JavaScript disabled, you will get a white page.

:::

### Hot module reloading

You'll notice that if you edit your component, the changes are immediately reflected on the page.
This is because we have HMR support in our application!

## Hooks

### `useFlecks()`

You may use this hook from your components to gain access to the `flecks` instance.

Example:

```jsx
function Component() {
  const flecks = useFlecks();
  const id = flecks.get('@flecks/core.id');
  return <p>Your application ID is {id}</p>;
}
```

### `useEvent(object, eventName, fn)`

#### `object`

The event emitter to listen to

#### `eventName`

The name of the event to listen for.

#### `fn`

The event handler to call.

Example:

```jsx
function Component() {
  const flecks = useFlecks();
  const [isConnected, setIsConnected] = useState(false);
  useEvent(flecks.socket, 'connect', () => {
    setIsConnected(true);
  });
  useEvent(flecks.socket, 'disconnect', () => {
    setIsConnected(false);
  });
  return <p>Socket is {isConnected ? 'connected' : 'disconnected'}.</p>;
}
```

### `usePrevious(value)`

#### `value`

The value whose previous value we're interested in.

See: https://blog.logrocket.com/accessing-previous-props-state-react-hooks/