What are some examples of using event emitters in React?

What are some examples of using event emitters in React?

Event emitters in React can be used for handling custom events. For example, you can create a simple event emitter class and use it to manage events between components.

Can you show me a code example?

Sure! Here's a basic example:

import EventEmitter from 'events';

class MyEmitter extends EventEmitter {}
const myEmitter = new MyEmitter();

myEmitter.on('event', () => {
  console.log('An event occurred!');
});

myEmitter.emit('event');

In this example, we create an event emitter and listen for an 'event' to occur.

How can I use this in a functional component?

You can use the useEffect hook to set up event listeners in functional components. Here's an example:

import React, { useEffect } from 'react';
import EventEmitter from 'events';

const myEmitter = new EventEmitter();

const MyComponent = () => {
  useEffect(() => {
    const handleEvent = () => {
      console.log('Event triggered!');
    };
    myEmitter.on('event', handleEvent);

    return () => {
      myEmitter.off('event', handleEvent);
    };
  }, []);

  return <button onClick={() => myEmitter.emit('event')}>Trigger Event</button>;
};

This sets up an event listener when the component mounts and cleans it up when it unmounts.