Details.tsx

import React from 'react';
import { useRecoilState } from 'recoil';
import { stateComment, stateStars } from '../../../states';
import { StarsPicker } from '../../ui-units';
export const Details = () => {
  const { id, journey } = useRoutingInfo(); // parse query string
  const key: IRecoilId = { id, journey };
  // best practice (won't cause rendering of the entire component)
  const starState = stateStars(key);
  // bad practice (will cause rendering of the entire component)
  const [comment, setComment] = useRecoilState(stateComment(key));
  return (
    <div>
      <StarsPicker className="raring" state={starState} />
      <input
          className="comment-input"
          type="text"
          value={comment}
          onChange={(e) => setComment(e.target.value)}
        />
    </div>
  );
};