0051504: Replace async useEffect references from the code with proper code

Description

useEffect hook callback in React expects to return a function or nothing. Using reserved keyword async in useEffect hook callback returns instead a Promise.

Using async in useEffect callback raises a warning in web console and could cause future problems during the execution of the hook.

Steps To Reproduce

These are the occurrences I found so far in the code:

- ColorCellPopover.jsx
- KeymapEditorCategoryDialog.jsx
- ProductSelector.jsx

Proposed Solution

Imagine this is the code we have right now:
  const [state, setState] = useState(0);

  useEffect(async () => {
    const data = await getData()
    setState(data)
  }, []);

The idea is to change the code from this:
  const [state, setState] = useState(0);

  useEffect(() => {
    const fetchData = async()=> {
      const data = await getData()
      setState(data);
    };

    fetchData();
   }, []);

There is another alternative that is to implement the asynchronous function into a useCallback hook:
  const [state, setState] = useState(0);

  const fetchData = useCallback(async()=> {
    const data = await getData();

    setState(data);
  }, []);

  useEffect(() => {
    fetchData()
  }, [fetchData]);

Issue History
Date Modified	Username	Field	Change
2023-01-30 12:38	jorge-garcia	New Issue
2023-01-30 12:38	jorge-garcia	Assigned To	=> Retail
2023-01-30 12:38	jorge-garcia	Triggers an Emergency Pack	=> No
2023-07-31 09:11	sreehari	Assigned To	Retail => Rajesh_18
2023-08-01 06:23	Rajesh_18	Status	new => scheduled

Relationships [ Relation Graph ] [ Dependency Graph ]