<h2>Introduction</h2>
<p>Past few years I've been reading a lot of social media postings and news articles about the shortage of developers. My opinion is that there is no shortage of developers. There is just a shortage of senior developers that can solve almost any given problem efficiently, and the headhunters of wealthy companies and unicorn startups are looking for these developers to bring the most profit to their company.</p>
<p>In late 2022, we started to see waves of mass layoffs in many of these companies that previously hired top talent with high salaries. The software industry became more volatile, and now these top-level developers are released to the market, making it even harder for new developers to get a job.</p>
<p>The reason for the elevated difficulty is that junior developers (mostly) are not profiting the companies immediately. This is because companies usually have to train their junior developers, which means they have to allocate senior developers' time for that, reducing the productivity of senior developers. During the recession, companies want the workforce to be fully capable of bringing profit, and if there are developers with experience from Google or Meta, they will hire that developer instead of a junior without question. However, there are many companies willing to take less experienced developers and teach them about the industry.</p>
<h2>How did I do it?</h2>
<p>I started breaking into the software industry in late 2019. Until that point, I was working as a full-time Paramedic and had no prior professional experience in building any production software. What I had, though, was long experience with computers as a hobbyist, in fact, over 20 years at that point. So I already knew a lot of people in the industry and had built contacts through events. I also knew the fundamentals of computer science. For me, it was relatively easy to land my first job, and I was thinking about why it was so.</p>
<p>At the first job, the factor was connections and the mentality to learn everything at hand. Getting the second job was harder but still relatively easy; this time, the weight was more on references, soft and hard skills, but also the mentality to learn new things.</p>
<p>If you are interested in how to break into the field, I have a few tips for you to look after. You can also add me on LinkedIn if that helps you build a network of software developers and influencers.</p>
<h2>5 Tips to Break into the Software Developer Industry</h2>
<h3>1. Learn the fundamentals of your new craft</h3>
<p>It is important to have a solid foundation in computer science (and I mean, you don't necessarily need a degree, just learn the basics) and programming concepts. This will not only help you understand the tools and technologies you will be working with, but it will also give you the problem-solving skills needed to succeed.</p>
<p>There are many resources available for learning programming, including online courses, textbooks, and open-source projects that you can contribute to, just to name a few. One great way to learn is by participating in hackathons; I participated in multiple hackathons just to get to know other developers. Just remember when learning coding, don't get in the loop of online or YouTube courses but try to solve problems yourself. YouTube videos are a great source of information, but only following the video doesn't help you alone.</p>
<h3>2. Build a portfolio</h3>
<p>This is heavily opinionated; I didn't have any type of portfolio. Just recently, I started showing off what I've been working with, and I didn't have anything to show for companies I applied to. But the thing is that, at the beginning of your career, you may not have a lot of professional experience to show off. However, you can still demonstrate your skills by building a portfolio of personal projects.</p>
<p>Personal projects could be anything from a simple app fetching data from an open API to a complex web application with a user interface and authentication logic. The important thing is to showcase your abilities and demonstrate your commitment but also the ability to complete what you start. There are a lot of projects that are never done. When you start building something, define what your goal is with that project and achieve that goal.</p>
<h3>3. Network and make connections</h3>
<p>This is an important one; I know many developers who never got into a job because they just didn't know the right people. You can get the job without networking too, but it is much easier if you have connections inside the company you would like to work in.</p>
<p>The software development industry is all about networking and building relationships. Attend industry events, join online communities, and reach out to other professionals to learn more about the industry and get advice. You never know who might be able to introduce you to a potential employer or mentor.</p>
<h3>4. Do things you enjoy and you don't have to work a day</h3>
<p>I know, it's cliché but hold up.</p>
<p>You can find all kinds of articles on top languages to learn, and usually, they use sources like Stack Overflow (and I don't mean it is a bad source, it is very interesting, and you can learn a lot from it). You will also hear all kinds of things like "learn Python, don't touch Java". The key thing is that if you start learning something you don't feel like doing, you won't enjoy it a lot. What I would tell you to do is explore all kinds of languages, Java, C#, TypeScript, JavaScript, whatever you think you would like to work with. Explore back-end, front-end, full-stack, try things in your own small projects.</p>
<p>Once you find one that fits you the best, learn that more and get comfortable with the language. You will find a job if you know almost any language because once you are comfortable with the basics, almost all languages follow the same patterns. Even PHP, Java, and whatever developer community tells you not to learn. My advice is that relatively easy languages to begin with are languages such as JavaScript or Python, and I predict they will keep up with their popularity in 2023 too.</p>
<p>Myself, I started coding with Visual Basic back in 1996. Over the years, I've been using all kinds of languages like PHP, Java, C#, TypeScript, JavaScript, C++, C, Dart, and Lua, just to name a few. Currently, I'm working with TypeScript and .NET (C#) because I'm a full-stack web developer consulting with Microsoft technologies.</p>
<h3>5. Be persistent</h3>
<p>Breaking into the software industry is a challenging task, especially if you are just starting out and don't already have a bunch of contacts and not piles of projects to show off. However, it is important to remain persistent. Keep learning and improving your skills, and eventually, you will be able to get your first job.</p>
<p>You will currently find a bunch of YouTube videos telling that ChatGPT and other Artificial Intelligence assistants are going to take over the software development jobs. Let me tell you - they are not going to do that for a while. There is much more than just writing code in this industry; AI might be able to write the code, but you have to understand what the written code is doing to make it any useful. Just learn AI and the tools but don't blindly trust what they offer you.</p>
<h2>Summary</h2>
<p>Getting into the software industry is a lot of work, and I predict it is going to be more difficult in 2023 because of the ongoing recession and volatility in the market. Just keep the focus on your goal; if you can't get the job during increasing market volatility, focus on improving your skills and researching the field, try to get connections, and you will make it.</p>


5 Tips for Breaking into the Software Industry as a Beginner in 2023

<p>Hooks were introduced in 2018. Nowadays hooks are everyday tools for developers, at least for those developers working with the code base using functional components. When i first started building functional React apps i didn't have any idea how to use custom hooks and most of the hooks i was using was useState and useEffect and due to that probably filled the codebase with alot of repeated non-sense.</p>
<h2>React Hooks</h2>
<p>So what are React Hooks ? They can be stateful and manage side-effects. React Hooks are simple functions that we can use to separate the reusable code from a functional component. In short, hooks opens up stateful logic for reusability without the change of component hierarchy.</p>
<p>There are roughly five categories of hooks.</p>
<ol>
<li>State management, such as useState which is for storing information such as user input value.</li>
<li>Reference creating, such as useRef. <a href="how-to-use-react-useref">Here</a> is my article about useRef hook.</li>
<li>Effects. These hooks let you deal with DOM, animations, networks and such. Shortly useEffect lets you haves side effects inside your functional component which is convinient because React is heavily leaning towards pure components.</li>
<li>Context. useContext is used for receiving information from other components without passing props.</li>
<li>Performance improvement hooks such as useMemo. useMemo is used to reduce unnecessary re-rendering if data didn't change since previous rendering.</li>
</ol>
<h2>React Custom Hooks</h2>
<p>So now we covered some basics of hooks, what are the custom hooks then ? Custom hooks are reusable functions but in React way. Reason is the same as with any reusable functions to reduce repeating your code.</p>
<p>Naming function naming should be starting with word "use" such as useSettings or useInput. Custom hooks should only be called inside functional component body but not inside for loops, conditions or nested functions but you can call them inside other custom hooks.</p>
<h2>Example</h2>
<p>Here is just an sample to show structure of simple custom hook. Our hook name is useUserStatus and we are using React internal hook useState and useEffect handling state and effects.</p>
<pre><code class="language-javascript">function useUserStatus(uid) {
  const [isOnline, setIsOnline] = useState(false);

  useEffect(() => {
    // useeffect logic
  }, []);

  if (uid) {
    setIsOnline(true);
  }
  // ...  other logics

  return { isOnline, otherLogic };
}
</code></pre>
<p>Here is example using ref for counting inside custom hook.</p>
<pre><code class="language-javascript">import { useRef, useState } from 'react';

const useCounter = (amountOfClicks) => {
  const count = useRef(0);
  const [contented, setIsContented] = useState(false);

  const next = () => {
    if (count.current >= amountOfClicks) {
      return;
    }

    count.current = count.current + 1;
    if (count.current === amountOfClicks) {
      setIsContented(true);
    }
  };

  return { count: count.current, contented, next };
};
export default useCounter;
</code></pre>
<p>and the way you would use this kind of hook is something like this.</p>
<pre><code class="language-javascript">import useCounter from './useCounter';

function App() {
  const amountOfClicks = 10;
  const { count, contented, next } = useCounter(amountOfClicks);

  return (
    &#x3C;div className="App">
      &#x3C;header className="App-header">
        &#x3C;p style={{ color: contented ? 'green' : 'red' }}>
          &#x3C;code>{count}&#x3C;/code>
        &#x3C;/p>
        &#x3C;button disabled={contented} onClick={next}>
          click to add
        &#x3C;/button>
      &#x3C;/header>
    &#x3C;/div>
  );
}

export default App;
</code></pre>
<p>Here we have sample how to use custom hook. In this sample, we pass amountOfClicks to our hook, this is cap it takes to re-render your page and change conditions. In this case if contented is true background changes to green and count to 10 and button is disabled.</p>
<h2>Conclusion</h2>
<p>When you are working day to day development you should consider adapting custom hooks as part of your toolkit, using custom hooks can reduce repeating code and keep your codebase cleaner.</p>


How to build React Custom Hooks

<p>This week I'm returning to React hooks. I've decided to cover the most useful hooks to remind myself how they work and if there is something new. I work with React every day, but I only use a handful of hooks on a regular basis. So, I'm going to go through all of the hooks and provide some small examples. I think it will be a helpful exercise for me and hopefully for others as well.</p>
<h2>Introduction to useCallback</h2>
<p>The useCallback hook is a valuable tool for optimizing the performance of your React application. By memoizing callback functions with this hook, you can avoid unnecessary re-renders and improve the overall performance of your app. I wrote an article earlier this year on custom hooks that briefly covers different types of hooks, including useCallback. If you're interested in learning more, you can check out that article.</p>
<h2>What is useCallback?</h2>
<p>It is a function that takes two arguments, a callback function and an array of dependencies. If you are familiar with the useEffect hook, the structure of useCallback is similar. The useCallback will return a memoized version of the callback function, which means that it will only be re-created if one of the dependencies in the array changes. This ensures that the callback function always has the most up-to-date value, and it prevents unnecessary re-renders in the child component where the callback is used.</p>
<p>If you are familiar with the useMemo hook, you might be wondering what the difference is between the two. One big difference is that the useCallback hook is specifically for memoizing callback functions, while the useMemo hook is for memoizing arbitrary values. But overall, both hooks help you optimize your React components by memoizing values and avoiding unnecessary re-renders, just with a different approach.</p>
<h2>How to use</h2>
<p>The useCallback hook can help optimize your React component's performance by memoizing your callback functions. To use it, just call the hook within your functional component and pass it the callback function and its dependencies as arguments. Then use the returned value from the hook as the callback function in your component. useCallback can be especially useful in situations where a callback function is used often and is likely to be recreated on every render.</p>
<h3>1. Basic example</h3>
<pre><code class="language-javascript">import { useCallback } from 'react';

const AwesomeReactComponent = () => {
  const myCallback = useCallback(() => {
    console.log("I'm callback");
  }, []);

  return &#x3C;button onClick={myCallback}>ClickClick&#x3C;/button>;
};
</code></pre>
<p>In this example, the useCallback hook is called with a callback function and an empty array of dependencies. The returned value from the hook is then used as the callback for the onClick event of the button element.</p>
<h3>2. Using together with useState and useEffect</h3>
<pre><code class="language-js">// child component

function LargeListOfRecipes({ searchTerm, onItemClick })
  const items = useSearchRecipes(searchTerm);
  const map = item => &#x3C;div onClick={onItemClick}>{item}&#x3C;/div>;
  return &#x3C;div>{items.map(map)}&#x3C;/div>;
}
export default React.memo(LargeListOfRecipes);
</code></pre>
<pre><code class="language-js">import { useCallback } from 'react';
export function Recipes({ searchTerm }) {
  const onItemClick = useCallback(
    (evt) => {
      console.log(`You searched ${searchTerm}`);
    },
    [searchTerm],
  );
  return (
    &#x3C;LargeListOfRecipes searchTerm={searchTerm} onItemClick={onItemClick} />
  );
}
</code></pre>
<h3>Drawbacks</h3>
<p>It is important to avoid overusing the useCallback hook in order to avoid potential drawbacks. One such drawback is that it might add complexity to your code, particularly in situations where it does not provide any performance benefits. You should only do performance optimization, if you are performing heavy computations on your app and you need to memoize your values.</p>
<h2>Conclusion</h2>
<p>The useCallback hook is similar to the useMemo hook in that it can be used to optimize the performance of your functional components by memoizing values. However, the useCallback hook memoizes functions instead of arbitrary values. This can help prevent the recreation of the callback function on every render, which can avoid unnecessary re-renders and improve the overall efficiency of your application.</p>
<p>It is important to note that optimization should always be approached with caution. Before embarking on any optimization efforts, it is essential to measure or profile the performance of your components to ensure that the optimization will be worthwhile. Optimization can increase the complexity of your code, and as a developer, you should always carefully consider the potential tradeoffs before proceeding. By being mindful of these considerations, you can ensure that your optimization efforts are effective and efficient.</p>


How to use React useCallback hook

<h2>What is useRef</h2>
<p>useRef is React hook that returns mutable ref object with property current. useRef allows you to access DOM which is useful in alot of cases where you need access to elements. When i was starting with the React, i was thinking what is the difference between the vanilla querySelector and React ref.</p>
<p>So useRef is very handy for accessing DOM elements, but what it is really powerful for is that you get access to persisted state of value through the component’s lifecycle.</p>
<p>Most of examples how to manage state with React are examples using useState. Which is obviously fine in alot of cases, but it has little caveat. Changing the state with useState is re-rendering your application everytime it changes, this is not always necessary.</p>
<h2>Why not document.querySelector instead ?</h2>
<p>useRef has similarities with the vanilla Javascript querySelector but technically it is completely different thing. Unlike ref, querySelector returns the first element within the document that matches the specified css selector, or group of selectors. With the useRef we have direct access to element.</p>
<p>Problem using querySelector with React is that React replaces existing elements in dom on state change and although elements look the same and even have same properties, they are not the exactly the same element object. Also if you have SSR setup to your React app, document and window for example wont work out of the box with SSR.</p>
<h2>Examples</h2>
<p>So these are few simplified versions i've seen in real customer projects and they helped me to understand the useRef better.</p>
<ol>
<li>usecase with simple login form
So first example is typical simple login form, many times i've seen this kind of case done with the useState. Here we use ref to access input value. Benefit in this kind of approach is slight performance improvement compared to useState. You can use this same way as useState to display validation errors.</li>
</ol>
<pre><code class="language-javascript">export default function LoginForm({ onSubmit }) {
  const loginNameRef = useRef();
  const passwordRef = useRef();

  function handleLogin(evt) {
    evt.preventDefault();
    onSubmit({
      loginName: loginNameRef.current.value,
      password: passwordRef.current.value,
    });
  }

  return (
    &#x3C;form onSubmit={handleLogin}>
      &#x3C;label htmlFor="loginName">Login name&#x3C;/label>
      &#x3C;input ref={loginNameRef} type="text" id="loginName" />
      &#x3C;label htmlFor="password">Password&#x3C;/label>
      &#x3C;input ref={passwordRef} type="password" id="password" />
      &#x3C;button type="submit">Login&#x3C;/button>
    &#x3C;/form>
  );
}
</code></pre>
<ol start="2">
<li>usecase with Intersectional Observer
In this example we use useRef to select element we want to observe and use also useState to manipulate dom. So this example we want to select LoginForms wrapper and when this wrapper gets into viewport paragraph text changes. This kind of solution is useful when you need to do something when element is getting into viewport, for example triggering animation.</li>
</ol>
<pre><code class="language-javascript">export default function App() {
  const containerRef = useRef(null);

  const [isVisible, setIsVisible] = useState(false);

  const onVisible = useCallback((entries) => {
    const [entry] = entries;
    setIsVisible(entry.isIntersecting);
  }, []);

  useEffect(() => {
    const observer = new IntersectionObserver(onVisible, {
      threshold: 0.6,
    });
    const element = containerRef.current;
    element &#x26;&#x26; observer.observe(element);

    return () => {
      element &#x26;&#x26; observer.unobserve(element);
    };
  }, [onVisible]);

  function onLogin(loginInfo) {
    console.log(loginInfo);
  }

  return (
    &#x3C;div className="app">
      &#x3C;div className="head">{isVisible ? 'visible' : 'not visible'}&#x3C;/div>
      &#x3C;div className="section" />
      &#x3C;div className="loginContainer" ref={containerRef}>
        &#x3C;LoginForm onSubmit={onLogin} />
      &#x3C;/div>
    &#x3C;/div>
  );
}
</code></pre>
<h2>Conclusion</h2>
<p>useRef is synchronous hook that is updating state immediately and persisting the state through the component’s lifecycle without re-render. However, nothing is great when overused and sometimes you can find use with combination of useState and useRef for example.</p>


How to use React useRef

<h2>TL;DR</h2>
<p>I had to learn MySQL for client project and here is the basics to get you started. This doesn't require too much of knowledge in SW development so you can be more junior or just figuring things out. You can find the five steps of setting up at the 5. steps to setup MySQL localy with Docker</p>
<h3>Background</h3>
<p>So recently i got work order from my client to build a NestJS back-end for their startup. NestJS it self is no challenge as i've been working with React and NextJS alot. BUT the client wanted to have MySQL database.. i never touched MySQL in any environment before, unless lectures in college counts. I didn't even know proper way to setup a local environment to try out different things. Setting up local LAMP environment didn't sound like something i'm interested to get into and i already had Docker running.</p>
<p>This article i will go thought shortly how to put up MySQL database localy, i wont go so deep, just few steps to get you started as i did when figuring out things, i'm sure there is more indepth MySQL experts around the internet.</p>
<h3>First things first</h3>
<p>Quick and simple recap for people who are completely new to MySQL.</p>
<p>MySQL is a open-source relational database management system and popular database choice for web applications.</p>
<p>It is storing the data in tables and tables are organized into databases. Each table is having rows and columns that are keeping your data. It uses Structured Query Language for managing the data in the tables and it is known for its speed, reliability, and flexibility.</p>
<h3>5. steps to setup MySQL localy with Docker</h3>
<ol>
<li>
<p>Setup Docker or have it already up and running.</p>
</li>
<li>
<p>Open termianl and pull docker image from Docker hub following command:</p>
</li>
</ol>
<pre><code class="language-sh">docker pull mysql

</code></pre>
<ol start="3">
<li>Create docker-compose.yaml (or docker-compose.yml) in your project folder (i will go through the other method of doing this later, i prefer having compose file)</li>
</ol>
<pre><code class="language-yml">version: '3.8'
services:
db:
image: mysql:8.0
cap_add: - SYS_NICE
restart: always
environment: - MYSQL_DATABASE=yourdatabase - MYSQL_ROOT_PASSWORD=yourpassword
volumes: - db:/var/lib/mysql - ./db/init.sql:/docker-entrypoint-initdb.d/init.sql
volumes:
db:
driver: local 4. Run command docker-compose -f docker-compose.yml up

</code></pre>
<ol start="5">
<li>You can verify if your docker is up and running with command prompt</li>
</ol>
<pre><code class="language-sh">docker ps
</code></pre>
<p>So thats basic dockercompose example for MySQL.</p>
<h3>Alternative way to setup MySQL with Docker</h3>
<p>I prefer docker-compose file, but here is alternative way to setup</p>
<ol>
<li>
<p>Install Docker on your machine if not already installed.</p>
</li>
<li>
<p>Open a terminal and pull the MySQL image from the Docker Hub by running the command: docker pull mysql</p>
</li>
<li>
<p>Start a new container with the MySQL image by running the following command, replace the environment variables with your desired configuration:</p>
</li>
</ol>
<pre><code class="language-sh">docker run --name your-mysql-container -e MYSQL_ROOT_PASSWORD=rootpw -e MYSQL_DATABASE=dbname -e MYSQL_USER=user -e MYSQL_PASSWORD=pw -p 3306:3306 -d mysql
</code></pre>
<ol start="4">
<li>You can verify that the container is running by using the following command:</li>
</ol>
<pre><code class="language-sh">docker ps
</code></pre>
<ol start="5">
<li>Connect to the MySQL container by running the following command in your terminal:</li>
</ol>
<pre><code class="language-sh">docker exec -it mysql-container-name bash

</code></pre>
<p>This will open bash to run commands in container. Once you are in the container you can use the mysql command-line client to interact with the database using the following command:</p>
<pre><code class="language-js">mysql -u user -p

</code></pre>
<p>after this command your mysql instance will ask password, you defined it in third step.</p>
<p>So here it is, a basics of how to setup a MySQL in Docker.</p>


Setting up local MySQL Database with Docker

<p>I recently ran into a problem with old code base that was having impure components and i was thinking what the heck is going on during rendering. That file was 1400 lines long, it was tedious project to figure out what is going on.</p>
<p>When writing modern React components we should be using the functional approach. Recently i find out that even React is changing its own documentation from class component approach to functional approach in their new documentation. Learning about pure functions is rather important topic if you are learning functional programming or you are already little bit more experienced developer and are looking for patterns to clean up your code, this might be good approach.</p>
<h2>Pure Function</h2>
<p>So what is pure function ? In essence, it is a function that returns exactly the same result every time it's called with the same set of arguments. Pure functon has no state, access to external states and no side effects.</p>
<p>Lets take a look at two Javascript array methods slice() and splice(). These two methods do exactly the same thing(kinda), but relatively different approach. Slice is the pure version of these two methods returning every call the same result without mutating the existing array but returning new one everytime. Splice however is mutating the existing array and is causing observable side effects, here is an simple example of mutating, splice is not always returning same output with same arguments:</p>
<pre><code class="language-javascript">const listOfNumbers = [1,2,3,4,5];

// No matter how many times you run slice method,
// it always return the same result
listOfNumbers.slice = (0,4) => [1,2,3,4]
listOfNumbers.slice = (0,4) => [1,2,3,4]
listOfNumbers.slice = (0,4) => [1,2,3,4]

listOfNumbers.splice = (0,4) => [1,2,3,4]
listOfNumbers.splice = (0,4) => [5]
listOfNumbers.splice = (0,4) => []
</code></pre>
<p>Here is the simple function to add person in the list of people. First example is impure. Why? Because it is having side effects by mutating the listOfPeople array outside the function.</p>
<pre><code class="language-javascript">const listOfPeople = ['Matt', 'Mike', 'Jack', 'Ann'];

// Impure function
function addPerson(listOfPeople, person) {
  listOfPeople.push(person);
  return listOfPeople;
}
</code></pre>
<p>Second example with this function is pure, because we are making copy of array of external data and returning that.</p>
<pre><code class="language-javascript">const listOfPeople = ["Matt", "Mike", "Jack", "Ann"];

// Pure function
function addPerson(listOfPeople, person) {
  return [...listOfPeople, person]
}

// you would use function like this
addPerson(listOfPeople, "Mark")

// and it will return copy of old array
// with new name

console.log(listOfPeople) =>
[ "Matt", "Mike", "Jack", "Ann", "Mark" ]
</code></pre>
<h2>Pure Component</h2>
<p>Now you might see wehre we are coming! React design is leaning towards pure function concept. In React rendering have to be pure, always. Components must always return same JSX with same given arguments and should not change any external variables that is existing before rendering.</p>
<h2>Example</h2>
<p>Here we have simple pure component for rendering Ingredient of recipe application, it is taking two arguments <strong>amount</strong>, suffix and ingredient. We are not changing anything outside of our component.</p>
<pre><code class="language-javascript">export function Ingredient({ amount, ingredient, suffix = '' }) {
  return (
    &#x3C;p>
      Add {amount}
      {suffix} of {ingredient}
    &#x3C;/p>
  );
}
</code></pre>
<p>Next we add parent for our children(i know clean code would tell you to first define the elephant and then the elephant ears). Here we have recipe of pancake made in a pure component way.</p>
<pre><code class="language-js">export default function Recipe() {
  return (
    &#x3C;>
      &#x3C;Ingredient amount={1.5} suffix="cups" ingredient="all-purpose flour" />
      &#x3C;Ingredient amount={3.5} suffix="teaspoons" ingredient="baking powder" />
      &#x3C;Ingredient amount={1} suffix="tablespoon" ingredient="white sugar" />
      &#x3C;Ingredient amount={1.25} suffix="cups" ingredient="milk" />
      &#x3C;Ingredient amount={3} suffix="tablespoons" ingredient="butter, melted" />
      &#x3C;Ingredient amount={1} ingredient="egg" />
    &#x3C;/>
  );
}
</code></pre>
<h2>Conclusion</h2>
<p>Pure functions(and pure components) are restrictive but that makes them very easy to test and read. Pure functions should be predictable, like math equation for example 2 x 3 is always 6, that means pure component in functional react should always return same JSX with same arguments you are giving to component. Your component should not manipulate any external data directly. There is places for impure functions but i'm going to return to that later on.</p>


Blog

5 Tips for Breaking into the Software Industry as a Beginner in 2023

How to build React Custom Hooks

How to use React useCallback hook

How to use React useRef

Setting up local MySQL Database with Docker

What is Pure Component in React

Categories

Latest articles

5 Tips for Breaking into the Software Industry as a Beginner in 2023

How to build React Custom Hooks

How to use React useCallback hook