Added some code styling tips and examples

components/ExampleComponent.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+import styles from "styles/exampleComponent.module.css";
+
+const ExampleComponent = () => {
+  return <button className={styles.button}>Amazing button!</button>;
+};
+
+export default ExampleComponent;

components/PowerfulComponent/handlers.js

@@ -0,0 +1,11 @@
+// Лучше писать документацию на функции, за это будет респект от менторов
+/**
+ * Increase counter
+ * @param {SetStateAction} setCounter
+ */
+const handleCounterClick = (setCounter) => {
+  return () => setCounter((prev) => prev + 1); // Если используем контекст, тогда замыкаем всё, что нужно внутри обработчика
+};
+
+// Экспорт лучше делать отдельно, чтобы всегда знать, что мы экспортируем из файла, а что используем внутри (как с public/private методами)
+export { handleCounterClick };

components/PowerfulComponent/index.js

@@ -0,0 +1,26 @@
+import React, { useCallback, useContext } from "react";
+
+import { CounterContext } from "context/counterContext";
+import { handleCounterClick } from "./handlers"; // Обработчики событий лучше держать в отдельном файле или использовать кастомные хуки
+
+/**
+ * Complex component with counter with context in it
+ */
+const PowerfulComponent = () => {
+  const context = useContext(CounterContext);
+
+  console.log(context);
+
+  const handleClick = useCallback(handleCounterClick(context.setCounter), [
+    context.setCounter,
+  ]);
+
+  return (
+    <div>
+      <h1>{context?.counter}</h1>
+      <button onClick={handleClick}>Increase</button>
+    </div>
+  );
+};
+
+export default PowerfulComponent;