I know, I know you must be wondering is this some kind of joke or what. This is a single concept everyone put a lot of pressure saying "you should always make your code reusable and don't repeat it". And yeah to a certain degree it is correct but as your experience and your projects grow you will find it very different from this theory.

Introduction

As a software developer, we are constantly trying up our skills as this is what the job description is all about and as we grow we see that the things that we learn are only true for a certain level of experience. I felt like not repeating my code in one of my projects and there I asked myself "Is it ok to REPEAT your code?" and bam!!!

Problem

Problem yeh hai ki main chahta hoon meri life mein koi problem hi na ho ...
Sorry, my friend saw the heading and got emotional.

Coming back, first, we need to understand a concept, called "technical debt". What this means, in a nutshell, is when we as software developers try to expedite the delivery time of functionality, which results in the need for code refactoring in the future to move forward. What I saw was that technical debt is somewhat proportional to making your code reusable. The more we try to make a component reusable (in the context of react) the more likely it is that we would need to refactor it in the future to move forward.

const NoteForm = ({ closeModal, showModal, isMobile }) => {
  const colorOptions = [
    "#cfe1b9",
    "#ccff90",
    "#fbbc04",
    "#fff475",
    "#a7ffeb",
    "#aecbfa",
    "#d7aefb",
    "#fdcfe8",
    "default",
  ];
  const [colorModal, setColorModal] = useState(false);
  const [formData, setFormData] = useState({
    title: "Untitled",
    note: "None",
    color: "default",
    tags: [],
    star: false,
    draft: false,
  });
  const { state } = useGlobalContext();

  //get the note which has to updated if opened a particular note
  const { noteId } = useParams();
  const thisNote = state.notes.find((entry) => entry._id === noteId);

  const updateFormData = (e) => {
    setFormData((prev) => ({ ...prev, [e.target.name]: e.target.value }));
  };

  //this is when you click on the submit button
  const submitFormHandler = () => {
    if (formData.note !== "None") {
      APIcalls.addData("notes", { ...formData });
      closeModal();
      setFormData({
        title: "Untitled",
        note: "None",
        color: "default",
        tags: [],
        star: false,
        draft: false,
      });
    }
  };

  // if for some reason the user presses the back button but there is still data in the note form
  // then it's going to be saved automatically in the backend but here if the back button on the browser is clicked or also the UI button clicked

  useEffect(() => {
    if (!showModal && formData.note !== "None" && !formData._id) {
      APIcalls.addData("notes", {
        ...formData,
        tags: [...formData.tags, "draft"],
        draft: true,
      });
    }
  }, [showModal, formData]);

  //reset the formdata when the modal is close and opened
  useEffect(() => {
    if (showModal && !thisNote) {
      setFormData({
        title: "Untitled",
        note: "None",
        color: "default",
        tags: [],
        star: false,
        draft: false,
      });
      setColorModal(false);
    } else if (thisNote) {
      setFormData({ ...thisNote });
    }
  }, [showModal, thisNote]);

  const updateNote = () => {
    APIcalls.updateData("notes", {
      ...formData,
      draft: false,
      tags: formData.tags.filter((tag) => tag !== "draft"),
    });
    closeModal();
    setFormData({
      title: "Untitled",
      note: "None",
      color: "default",
      tags: [],
      star: false,
      draft: false,
    });
  };

  };

I refactored this code almost 4 times!!!
Feeling like closing this window and blocking me on discord and twitter, trust me i feel the same some time.

Every time I wanted to add a feature it got more complicated as I was using a single component for updating the note, viewing the note, creating the note, and creating a draft note. Sounds cool right, but this is what a death trap is (it still haunts me some time). The very basic simple and humane solution to this problem was creating one more component which can look after creating the note.

Conclusion

Don't take these programming rules to your heart and try to defend them Your job is to create software and solve problems not to protect some coding rules. The instinct reaction of developers to export the reusable code is idiotic. You need to understand sometimes it is ok as well as necessary to repeat your code. As the codebase grows the code that you write matures and creates an environment around it that is necessary for its specific functioning. Sometimes there is a context in the code where reusability should be avoided at all costs. Thank you hope it helps.