Yes, it is completely okay.

According to the docs - Use Multiple Effects to Separate Concerns:

Just like you can use the State Hook more than once, you can also use several effects. This lets us separate unrelated logic into different effects.

React will apply every effect used by the component, in the order they were specified.

Instead of dynamically choosing what function to pass useEffect it would be much cleaner to instead always pass the same function, and in that function choose what to do.

Choosing what to do could be calling two different functions, or just the title setting itself, thats up to you, but I wouldn't try to do your conditional logic like it is currently.

Example of both your version and my suggestion:

As you can see, they are functionally the same. But I see absolutely no reason to opt for ExampleA.

const { useState, useEffect } = React;

function ExampleA() {
  const [count, setCount] = useState(0);
  
  useEffect(count % 2 == 1 ? 
     () => {
       console.log(`You clicked ${count} times (ODD)`);
     } : 
     () => {
       console.log(`You clicked ${count} times(EVEN)`);
     }
  );
  
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

function ExampleB() {
  const [count, setCount] = useState(0);
  
  function even() {
    console.log(`You clicked ${count} times (EVEN)`);
  }

  function odd() {
    console.log(`You clicked ${count} times (ODD)`);
  }

  useEffect(() => {
    if (count % 2 == 1) {
      odd();
    } else {
      even();
    }
  });
  
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>Your option</h1>
      <ExampleA />
      <h1>My Suggestion</h1>
      <ExampleB />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

useEffect has two parameters, a function and an array of dependencies. Whenever any of the items in the dependency array changes, the function as the first parameter passed to the useEffect is called.

For your particular example, it can be demonstrated as follows:

export default function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    if (count % 2 === 0) {
      console.log("COUNT IS EVEN");
    } else {
      console.log("COUNT IS ODD");
    }
  }, [count]);

  return (
    <div className="App">
      <h1>Count: {count}</h1>
      <button onClick={() => setCount((c) => c + 1)}>Increment</button>
    </div>
  );
}

Notice [count] as the second param of useEffect, whenever count changes, our function runs and logs whether the value of count is odd or even.

For separate use cases, it's advised to separate your logic out into separate useEffect hooks. For example, consider you have another value for which you want to run your side-effects, you can do so by creating another hook and passing the dependency array.

There are some other nuances to useEffect such as what happens if you don't pass a dependency array to the hook or what if you pass an empty array as the dependency. I would encourage you to look into on your own.