DEV Community: Samet Mutevelli

My experience in re-writing a simple library 3 times in 2 years

Samet Mutevelli — Thu, 30 Dec 2021 11:03:23 +0000

About four months ago, I posted this to document my ideas at the time to improve my one-and-only React package in a more developer friendly way.

This is a package I created to solve a problem of mine a while ago. Since the initial publish, I re-wrote the package three times. Every time I learned something new, I implemented my knowledge on the package.

First re-writing was after I learned JavaScript classes. So I tried to write the library using pure classes.

Then I learned TypeScript and re-wrote the package again in order to provide TypeScript support. This time I got rid of the class structure and made it more React-y.

Over the time, the users of the package gave some very valuable feedback. Even though I tried my best to respond to everything, there were some design flaws in the package that was bugging me.

So I wrote the post I shared earlier just to document my ideas. And recently got time to implement all of them.

What Changed and How

Global state management feature is removed

React Step Builder used to provide methods for handling form state. If you had an input, checkbox, or select element, you could easily pass the methods provided by the library and it was saving it in a global state. The wrapper component was holding the state pieces from each step in a single location.

Handling state is a very delicate issue for a lot of React developers, including me. People use different solutions which they might not want to give up on.

The questions/concerns I got from developers consolidated the idea so I didn't want to force anyone to use those methods anymore. It was a simple step-by-step interface builder and I wanted to limit it's responsibility to that only.

In the latest version of React Step Builder, global state feature is completely removed from the library. So it's not a library that offers you some methods to handle your form state anymore. Think of it as a library to create any interface where user can go back and forth between different steps. That's it!

Unintuitive Step component is removed

Before, the developer had to create their own Step components in a separate file and pass it as a prop to a special component called Step. This approach has also proved itself to be very cumbersome. I even had trouble using the library in a project at work because of this.

So I researched more about React-y way of dealing with children prop. Using React.Children method, I was able to treat the direct siblings of the main wrapper component as steps.

I came up with this solution solely considering "Composition over Inheritance" principle of React. People should be able to create their component tree as they like and the library should do the rest. I realized I was creating more work for the developers than to save them time.

Now it's up to the developer to create their steps in the same component, or divide them up to separate files. This approach also made it easy for me to decide to halt global state management feature. Because when all the code for each step is in a single place, the state can live in the same place and be served to each step directly or via props, easily.

A Custom Hook created for shared methods

Removing Step component brought about a problem that I really enjoyed solving.

Step component was providing some useful props such as next, prev, jump methods that are used to navigate between steps. Now I had to serve these methods in a different way.

Custom hook solution was my first choice as most React developers are already comfortable with the pattern. So I created a hook called useSteps that provides all the properties and methods that were shared via Step component's props before.

The component that holds the Steps wrapper should be wrapped in StepsProvider component for this to work and at first I didn't really like the idea of forcing the developers to use another wrapper component. However, being free from a special component's props and being able to use those methods anywhere under the provider's tree was the flexibility I wanted. So I went with the StepsProvider solution where the data is shared through React's Context API.

Finally...

I really enjoyed working with this library over the past two years. It's a novice-level piece of software but I learned so much through trying to develop this. It pushed me to research so many different things. Creating software for other developers is also very enlightening in a way that made me feel more responsible for the code I was writing. I kept asking myself, "would I enjoy writing code like this?" It's probably still not perfect, but it came a long way.

Please review the documentation, play with the codesandbox repo, use it in your projects, and let me know what you think!

Things to do in your personal projects for your first job

Samet Mutevelli — Fri, 10 Sep 2021 23:13:33 +0000

It is hard to prove your level of experience if you have never worked in the software industry before. As a relatively new developer who has gone through a bootcamp and job-hunting processes in the past year, I'd like to draft some ideas for upgrading your portfolio out of my personal experience.

Know how to work with data

A web application is useless without data. All the big companies you would possibly want to work for are representing data in their products and internal tools one way or another. Know how to use data tables, charts, calendars, etc.

Fetching some data and putting it on a data table is not enough sometimes. Make your apps interactive by adding functionality for CRUD operations to the table or calendar component.

Beware of network calls initiated by your app in your projects. Your apps should not make unnecessary network requests. Research and practice with libraries that handle this problem. Or, even better, come up with your solution!

I interviewed a handful of companies whose interview process included a project/assignment that had something to do with tables. Knowing how to handle them would give you a head start when interviewing those companies.

1. Be "jack-of-all-trades" and "master-of-one" at the same time

This was the key in my experience. I heavily focused on React and its ecosystem while learning other things to make me a better front-end developer. I built many web apps (front-end/full-stack), a simple UI library, a Google Chrome extension, multiple mobile apps; all revolving around my React knowledge.

I learned GraphQL but used it with React. Made back-end applications with React front-end. React Native and Chrome extension projects of mine showed my "can work in different platforms" knowledge but they were still involved in React in some way.

It gave me a lot of talking points in interviews for jobs that required React knowledge since it is (probably) the most requested technology for web development jobs recently. It also proves that you are eager and open to learning new things.

Pick yourself a focus point (preferably a popular one) and learn other things around that technology. Having trouble finding the peripheral technologies to go with your main focus? Look at job descriptions to see if they are mentioned, look at packages and their download count on npmjs, look at the "used by" count of a library's GitHub repository. These are all indicators of an open-source library's popularity.

Polish your projects

This is a nice way to show your "attention to detail" skill. Your first software job is not going to be writing code 8 to 5 every day. There will be team discussions around features, meetings with clients, writing documentation, etc. A developer who is capable of handling different aspects of a project is an asset to any company.

Say you built an app and deployed it. It is equally (if not more) important to have;

readme file that documents the project
nice URL (not randomly generated by Vercel, Heroku, Netlify, etc.) attached to the Readme file and the description of your repository on GitHub so the recruiter/hiring manager can see what you are capable of
fully functioning features and UI elements that looks and feels complete

If you already do that for every project, awesome! The next thing would be to talk about your projects and find ways to improve them.

Record short videos explaining how to use your application
Post about struggles, accomplishments, things you learned building the app on social media (LinkedIn & Twitter is usually a great place to do that)
If a project came out to be a good one, keep improving it. One large project would be more impactful than 5 basic projects (I did this with my UI library project by rewriting it 2 times, once after I learned classes in JavaScript, once after I learned TypeScript)
If you don't know what to do to improve your projects, you can research similar products for new features or ask other developers for ideas.

Conclusion

All the things I mentioned here immensely helped me get two high-paying jobs in the 8 months. I hope some fresh bootcamp grads or self-learners might benefit from my experience.

To some, the list might be overwhelming and feel like forcing you out of your comfort zone (that was the intention, surprise!) However, if you want to be a software developer, these are the things that you will deal with on a "sprintly" basis.

You will have to communicate.

You will have to document.

You will have to have lengthy discussions on products/features.

And eventually, you will get to the "fun" part; building stuff!

It's a package. You cannot separate one from another. So it's better if you get to it before you start your first job!

Answers to Job Search Questions

Samet Mutevelli — Sat, 30 Jan 2021 20:06:17 +0000

Two weeks ago, I have accepted my first full-time job in the U.S. as an Associate Software Engineer. As many do, I shared this exciting news on my LinkedIn. For some reason, my post gained some traction and received 300k views and hundreds of comments.

I didn't expect 600+ connection requests and countless messages/comments in a matter of a week from my other fellows who were also looking for a job as a Software Engineer. I feel terrible not writing something back because I was in their situation a couple of weeks ago. But, I also cannot have a separate conversation with everyone either.

First of all, I do not see myself in any capacity to give others advice or guide them through their job-hunt journey. Heck, right before Christmas I was so frustrated and lost my hope to find a job until 2021 summer after some pretty upsetting rejections. So, the purpose of this article is to share my experience with those who ask.

About Me

30 years old, married, living in Los Angeles. I studied at Lambda School Full-Stack Web Development program for a year. I do not have an engineering degree, but web development was something I've been doing since high school. Before Lambda, I studied International Relations at college and was pursuing academic career in that field. So there is a big career change decision there.

When I started Lambda School, I used to work as a delivery driver for DoorDash, GrubHub, Amazon, and some Uber/Lyft business during the day and some weekend nights, #ImmigrantLife. I started part-time at Lambda and switched to full-time since Covid lockdowns.

Statistics

I have applied for over 262 jobs, took about 16 interviews, and received more than 80 rejections. Some interviews went all the way to the final round, while some others were only initial screenings/coding challenges/take-home assignments.

Mental State

I knew this was a marathon, not a sprint. So I didn't really obsess with the job applications. I tried to apply for at least a couple of jobs every day, or a total of 20-30 jobs a week. Each application would take a couple of minutes if I am not writing a cover letter from scratch.

When times were hard and I was feeling down, I reminded myself that it takes only one company to say "yes".

I was lucky to have a very supportive wife and a group of friends who are striving for the same goal as me. So whenever I felt hopeless or moody, I'd vent to them and feel better. It really helps to have a support system.

Some days I hated to do any job applications or write a single line of code. I tried watching tech conference videos in those days. Some days were too hopeless and I simply just played video games or tried to bake something to treat myself. Covid + being an introvert made it easy for me to just stay home blow some steam.

Coding Challenges and Take-Home Assignments

I did solve whiteboard-style algorithm questions for a couple of companies. I didn't do great in them, but I solved the questions eventually. None of them really worked.

I am with Ben Awad when it comes to coding challenges in interviews. I think they are broken most of the time. It doesn't measure the person's skills and doesn't represent the job's day-to-day requirements.

However, having an actual experience with the technologies that are listed in the job description was more important in all the interviews I took. They asked me a lot of questions about my projects and I got to talk about the things I have built, which felt great.

I also loved take-home assignments and I think it gives a better understanding of the job's nature. One startup literally had me built one page of their product and it was so much fun. I owe my TypeScript knowledge to that assignment.

Also, the job I got had me built a data-driven React application with charts and an API of my choice. I built a COVID tracker application and represented the data in charts using Apex Charts. In all other take-home assignments I took, I moved to the next stage in the interview process. Building a lot of stuff on my own eventually paid off because when it comes to starting a project and building a product, I was so ready and it had become my day-to-day anyways.

Resume

I followed Lambda School's resume guide and added my flavor to it for preparing my resume. Here are the basic principles of a resume for a software engineer/developer job:

1 page for every 10 years of experience
Most related experience (projects in my case) at the top
Explain each project with action verbs and quantifiable results
A summary section at the top if you have a good one, I didn't
Make it ATS (Applicant Tracking System) readable: no images, no tables, no other visuals, just text (cvcompiler is a good tool for testing that)
Add the job title as your title in the resume at the top, under your name

Cover Letter

I wrote a cover letter for more than 59 of my applications (numbers are not exact because I didn't do a good job saving every single cover letter I wrote.) I can guarantee that more than half of them are the same template with company name and role updated. Some jobs require it, so you have to. Some ask you questions like "What makes you stand out?", I'd answer them all the time. Personally, I don't think my cover letters made much of a difference. I still wrote them if I liked the job description a lot.

GitHub Profile

I took this one very seriously. I tried to keep my GitHub profile very active and I tried to push my code every time I worked on a side-project.

The most important thing about my GitHub profile was that every time I completed a side project and pin it on my profile, I tried to make them look as polished as possible:

Picked the repo names meaningfully
Deployed my apps at Netlify or Vercel
Shared links on the repo page
Wrote some custom Readme file if it requires some configuration to set up locally
In my code, I tried keeping it clean and making my apps look stylish
Changed the property of my apps if I am deploying it
Added custom favicon if I am loving it

I paid extra attention to the projects that I put on my resume.

I say these because some interviewers explicitly complimented my GitHub profile and activity. Obviously, they look there.

Another thing I did coding-wise was that I tried coding in different areas. Besides front-end with React, I learned Node/Express at Lambda but I did other apps with GraphQL/Apollo. I made an Android app with React Native deployed at Google Play Store. Another project of mine was a Chrome Extension. I have one open-source package published on the NPM registry. It's all JavaScript, but they are different environments.

LinkedIn & Networking

I tried to connect to software developers and recruiters in my city as much as possible. I'd ask the recruiters if they have any junior roles. Some of them directed me to certain companies or job listings. More importantly, they'd share positions sometimes and I'd apply for them. It's good to surround yourself with like-minded and resourceful people in this process. It helps to keep you on track.

Another thing I did consistently on LinkedIn was sharing my projects and talking about my progress. I don't know how much this would help with finding a job but it definitely helped me with my imposter syndrome. Other developers would comment on my projects and I'd feel confident and that I belong where I am.

Unfortunately, due to Covid, I couldn't do any in-person meetings or informational interviews.

Portfolio Site

For so long, I had ridiculous portfolio websites. They didn't look ugly, but they were silly. So I am not really one to talk about portfolios. I guess it's good to have a basic one in case they decide to look at it.

Job Search Process

I systematically saved 99% of my applications by "title, company, location, link, cover letter, date applied on, and status" in a Google Sheets file. Every time I applied for a job, I saved it. It gave me a chance to have a holistic view of the entire process. When I felt like I am not applying as many or applying for too many jobs, I'd look at my file and see my progress.

I tried to apply for jobs on various platforms. I can say this worked for me because I found my job through a recruiter e-mail through Dice. My three main platform was LinkedIn, Indeed, and Dice. Sometimes I used to check workatastartup.com and angel.co for startup jobs.
4 of my interviews came from workatastartup.com but they all wanted more experience, a person who can hit the ground running. I was looking for some level of mentorship so I decided to move towards mid to big size, enterprise-level companies where I could work in bigger groups with other people and have a proper teamwork environment. This also worked for me, I found my job at a company exactly like that.
If the main requirement in the job was React, I applied for it. My most important skill is React and its ecosystem. PLEASE, PLEASE, PLEASE, do not be discouraged by all the techy name-drops they put in a job description. You can learn most of them in the job (My soon-to-be supervisor said that in the interview). If you have the most important skill in the description, go apply for it.
People say always negotiate your offer. I had a bad experience in that department. In my first month, I received an offer but it's been retracted due to a pay mismatch. The job was based in a cheaper location but it was 80% remote. They didn't want to pay the average rate in my city so they changed their mind after telling me they are going to extend the offer. Obviously, it's a rare thing to happen.

Closing Thoughts

It takes only one company to say “Yes” to your applications.

Rejections are part of the process, don’t take them personal and don’t dwell on them so much.

It’s numbers game. Apply as many as you can. You never know which one is going to work out for you.

Hope this helps.

Best of luck!

Preventing memory leak by handling errors and request cancellations separately in Axios

Samet Mutevelli — Wed, 23 Dec 2020 17:56:35 +0000

I am currently working on a custom hook in a React application. The hook simply makes an API request to a third party API and fetches some data. My Axios call updates the state of the hook with some data or an error message, based on the response from the API call. I encountered a problem in the implementation and it took me a while to figure out. In this post, I am sharing my solution.

Problem

When making a network request with axios in a React app, you will likely update your state based on the response of the request. The data that comes in the .then() block is usually saved in the state, and the .catch() block usually updates the state with an error message.

const dataFetchingHook = () => {
  const [data, setData] = useState([]);
  const [error, setError] = useState("");

  useEffect(() => {
    axios
      .get("https://someapi.com/data")
      .then((response) => setData(response.data))
      .catch(() => setError("Error fetching data"));
  }, []);
};

return data;

With this approach, it is assumed that every network request will be completed and resulted in either resolve or rejection. However, when the request is canceled halfway, the Promise also rejects and falls into the .catch() block.

To get to my point, now let's set up the network request so that it cancels if the component that uses my dataFetchingHook is unmounted.

useEffect(() => {
  const source = axios.CancelToken.source();

  axios
    .get("https://someapi.com/data", { cancelToken: source.token })
    .then((response) => setData(response.data))
    .catch(() => setError("Error fetching data"));

  return () => {
    source.cancel();
  };
}, []);

The problem resides right here: When the component is unmounted, the network request cancels but canceled network requests fall into the .catch() block of the request, just like errors. However, the .catch() block is trying to update our error state, and React tells us this is a memory leak:

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

Solution

axios provides a method to check if a rejection is caused by a network cancellation or not. We simply check inside the .catch() block whether the network request is canceled halfway or completed and rejected by the server.

Let's update the useEffect.

useEffect(() => {
  const source = axios.CancelToken.source();

  axios
    .get("https://someapi.com/data", { cancelToken: source.token })
    .then((response) => setData(response.data))
    .catch((error) => {
      if (axios.isCancel(error)) {
        console.log(error); // Component unmounted, request is cancelled.
      } else {
        setError("Error fetching data");
      }
    });

  return () => {
    source.cancel("Component unmounted, request is cancelled.");
  };
}, []);

Here, I made use of the error argument of the callback inside the .catch() block. axios.isCancel(error) checks if the rejection is caused by a cancellation. Remember, inside useEffect's return statement, we canceled the network request if the component is unmounted.

Now, if there is a network cancellation, in the case of the user clicks somewhere and the data-fetching component is unmounted; the application is not trying to update the state with setError, it logs a different error instead.

Conclusion

Network requests that are made by axios are very easy to cancel. Simply make use of the CancelToken object and cancel the request if the component is unmounted, especially if you are updating your state inside the .catch() block.

Converting class components to functional components (basic structure, state, & life-cycle methods)

Samet Mutevelli — Wed, 11 Nov 2020 23:34:18 +0000

I encounter many developers who have learned the class components the first time they were learning React or have been using the class components for a long time, asking questions about converting the class components to functional components.

In this tutorial, I will be going over the conversion of an existing React project's basic structure, state, and life-cycle methods into functional components and hooks. If you started using React with the class components and are not comfortable with this transformation, this tutorial is just for you.

For sake of organization, here are the topics I will be going over.

Basic Structure

Binding class methods
this keyword
render() method
props object

State

Creating state
Updating state
Consuming state

Life-cycle methods

componentDidMount
componentDidUpdate
componentWillUnmount

TL;DR

Class Components	Functional Components
Method binding required unless arrow functions used	No binding required
Use of `this` keyword	No `this` keyword
`render()` method	No `render()` method
`props` in constructor	`props` as functional component's parameter
Define `state` object in the beginning	Use `useState` hook
`state` can only be an object	`state` can be object, array, integer, string, etc.
Only one state object	Multiple `state` pieces
`this.setState` merges state objects	Setter methods replace state value
`this.setState` accepts an optional callback function as second argument	It is not the case
3 most important life-cycle methods as separate functions	`useEffect` can imitate all three at once.
`componentDidUpdate` does not execute in the initial render	`useEffect` with non-empty dependency DOES also executes in the initial render
Have to manually check changes in `props` or `state` object in `componentDidUpdate` method	Dependency array as second parameter of `useEffect`takes care of it automatically

Basic Structure

Even though the structure of the class and functional components look different at first glance, most stuff in class components are omitted or overly simplified in functional components.

Binding class methods

When we create a method in a class component, we have to bind it to this object (unless you create your method as an arrow function) so that we can use it in our component.

class MyComponent extends React.Component {
    constructor() {
        super();
        this.myMethod = this.myMethod.bind(this);
    }
    myMethod() { 
        // do stuff
    }
    render() {
        return // some jsx
    }
}

In a functional component, no binding is necessary because there is no class. You may create your methods inside your component's function definition as you like (function definition, assignment to a variable, etc.)

const MyComponent = () => {
    const myMethod = () => {
        // do stuff
    }
    return // some jsx
}

`this` keyword

In a functional component, we no longer need the this keyword. There is no class instance, so we do not refer to our state, props, or methods as a member of the class. Let's continue from the previous example. If we are to refer to the myMethod function in our JSX, we would do it like this:

<button onClick={myMethod}>My Button</button>

`render()` method

In a functional component, we also do not need the render() method anymore. Whatever our functional component returns become our component's JSX.

`props` object

This is an obvious one because you probably used stateless functional components before, but I did not want to skip it.

In class components, you pass props to the base constructor so that you have access to the props object as this.props.

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
    }
    // do stuff
}

In a functional component, props comes as a parameter to the component's function definition.

function MyComponent(props) {
    // do stuff
}

State

Dealing with state in class and functional components are not too different. The most important part is probably understanding the difference between the setState method in class components and setter methods in functional components.

Creating state

In older versions of React, the state used to be defined in the constructor. Later on, it changed so that you can define a state object right at the beginning of your component.

In older versions:

class MyComponent extends React.Component {
    constructor() {
        this.state = { myState: "my value" }
    }
    // do stuff
}

Newer versions:

class MyComponent extends React.Component {
    state = { myState: "my value" }
    // do stuff
}

In functional components, you need to use the useState hook for creating a new state piece. Also, in the class components, state has to be an object and there can be only one state object in a class component. This is not the case when creating a state with the useState hook.

const MyComponent = () => {
    const [myState, setMyState] = useState('my value');
    const [myNumber, setMyNumber] = useState(22);
    const [myBool, setMyBool] = useState(false);

    // do stuff
}

Here, we created 3 different pieces of state for one component. One is a string, one is an integer, and one is a boolean value.

Let's explain the way we create a state here.

useState hook returns a tuple with two elements: the first one is the value of the state we created, the second one is a function for updating that specific piece of state, which brings me to the next topic.

Updating state

When we are updating our state in class components, we utilize React's setState function which has a slightly different API compared to the setter method returned from the useState hook.

class MyComponent extends React.Component {
    state = { 
        myState: "my value", 
        myOtherState: "my other value" 
    }

    updateMyState = () => {
        this.setState({ myState: "my newer value" });
    }

    render() {
        // After running this.updateMyState()
        console.log(this.state); // { myState: "my newer value", myOtherState: "my other value"}
        return // some JSX
    }

}

We pass an object to the this.setState method with the keys that we desire to update. this.setState automatically merges the passed state into the existing state. This is not the case when we are dealing with state as objects in functional components.

const MyComponent = () => {
    const [myState, setMyState] = useState({ 
        myState: "my value", 
        myOtherState: "my other value" 
    });

    const updateMyState = () => {
        setMyState({ myState: "my newer value" });
    }

    // After running updateMyState()
    console.log(myState); // { myState: "my newer value" }

    return // some JSX
}

Another difference is that the second argument of setState accepts an optional callback function in class components to run after the state change happens. Even though the React documentation does not recommend using this method and instead recommends using the componentDidUpdate life-cycle method, you might be inclined to think that the setter method returned from useState in functional components would provide the same optional callback feature. But it does not.

Consuming state

This is a fairly easy one. Referring to a piece of state in a class component: this.state.myState.

In a functional component, whatever name you gave your state while de-structuring from the useState hook, that's your state name.

Life-cycle Methods

Life-cycle methods might look a little bit trickier compared to what I've explained so far. We use the useEffect hook for imitating all three life-cycle methods I will be discussing here.

componentDidMount

We use this life-cycle method for the side effects of our component, such as calling an API, etc. when the component is initially rendered. Everything inside this method is called once the initial rendering of the component is completed.

class MyComponent extends React.Component {
    // state, etc.

    componentDidMount() {
        this.fetchSomeData();
    }

    // do stuff
}

To do the same thing in a functional component, we make use of our useEffect hook. useEffect takes two parameters: the first one is a function to call, the second one is an optional dependency array.

const MyComponent = () => {
    // state, etc.

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


    // do stuff
}

When imitating componentDidMount, we leave the second dependency array empty. Why? Because React looks at that array and executes the function in useEffect if any value in that array changes. Since we only want to fetch our data once the component is initially rendered, we leave that array empty. An empty array means, "Hey React, watch this empty array. If anything changes, execute the function I gave you."

Here is an important note: whether we leave the dependency array empty, pass values in it, or don't even pass the array itself to useEffect; either way React executes the function in useEffect in the initial rendering, which brings me to the next life-cycle method.

componentDidUpdate (prevProps, prevState)

This life-cycle method is invoked after an update in props or state object occurs. It takes two parameters prevProps and prevState so we can check if the current props or state has changed in the last component update.

class MyComponent extends React.Component {
    // state, props, etc.

    componentDidUpdate(prevProps) {
        if (this.props.id !== prevProps.id) {
            this.fetchData(this.props.id);
        }
    }

    // do stuff

}

Here we are checking if this.props.id has changed or not. If changed, we are fetching new data based on the new id. useEffect saves us some time when checking if the props object has changed or not.

const MyComponent = (props) => {
    // state, etc.

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

    // do stuff
}

We made use of the dependency array I was talking about earlier. Now React will watch props.id value and execute the function if it changes. I want to remind again: The function in useEffect will be executed in the initial render as well as following updates on props.id while componentDidUpdate will not be executed in the initial render.

If you remove the dependency array completely, the function in useEffect will run in every update of the component.

componentWillUnmount

This life-cycle method is invoked right before the component is unmounted. If you have ongoing side-effects that you started earlier such as a network request or a timer, this is the place you clean them up.

class MyComponent extends React.Component {
    state = { counter: 0 }

    componentDidMount() {
        this.myTimer = setInterval(() => {
            this.setState({ counter: this.state.counter + 1 })
        }, 1000);
    }

    componentWillUnmount() {
        clearInterval(this.myTimer);
    }

    // do stuff
}

Here we created a timer in our componentDidMount life-cycle method. It updates and increases this.state.counter every second. If we do not clear this up in the componentWillUnmount life-cycle method, we will get Can't perform a React state update on an unmounted component error after the component is unmounted.

To do the same thing in functional components, we make use of the return keyword inside our function in useEffect. Let's create the same thing in a functional component.

const MyComponent = (props) => {
    const [counter, setCounter] = useState(0);

    useEffect(() => {
        const myTimer = setInterval(() => {
            setCounter(counter => counter + 1);
        }, 1000);

        return () => {
            clearInterval(myTimer);
        }

    }, []);

    // do stuff
}

In case you haven't realized already, we did imitate componentDidMount and componentWillUnmount under one useEffect call.

Another note: Here we passed a function into setCounter method: setCounter(counter => counter + 1). This is to avoid stale closures. Dmitri Pavlutin explain what a stale closure is here very well in case you haven't heard of it.

Final Thoughts

Converting an existing React project from class components to functional components might look cumbersome.

When hooks were first introduced, the React team suggested a Gradual Adoption Strategy. However, it has been almost 2 years since and there is really not much that you can do in class components but not in functional components, thanks to hooks.

Furthermore, most libraries are adopting hooks by providing new API designed with them. Many React developers find hooks a clear, concise way of building apps with React. If you have never used functional components with hooks before, it is my personal opinion that it is time to start considering.

Multi-step forms with React & TypeScript

Samet Mutevelli — Mon, 09 Nov 2020 10:22:40 +0000

Overview
What's Changed
The New API
Example Component with TypeScript

Overview

In my first and latest post, I introduced my react-step-builder package for creating multi-step front-end interfaces with an example registration form.

Recently, I was working on adding TypeScript support to my project along with some changes to the API of the library. I would like to mention those changes in this post for those who are familiar with the previous version and would like to upgrade to the TypeScript version. If you've never heard of this library, you are encouraged to check out the docs on the GitHub Readme file.

Some of these changes were required to make it work with TypeScript, while some others were purely for clean-up purposes.

What's changed?

v1.1.5	v.2.0.x	Reason
`props.current`	N/A	No real use case.
`props.getState(key)`	`props.getState(key, defaultValue)`	Before initiating a state value value, getState returns the default value you pass. This change was required for the default types of `input.value` and `input.checked` HTML attributes. For text inputs or textareas, pass an empty string. For checkbox values, pass a boolean value.
`props.step`	N/A	Everything under `props.step` is moved directly under `props` object. For example: `props.step.order` is now `props.order`
`props.step.nextStep`	N/A	No real use case.
`props.step.prevStep`	N/A	No real use case.

The New API

Property	Type	Description
`props.order`	`number`	Order number of the current step component
`props.title`	`string`	Title of the current step component
`props.progress`	`number`	Progress of the current step, value between 0 and 1
`props.next`	`function`	Function to move to the next step
`props.prev`	`function`	Function to move to the previous step
`props.jump`	`function<step>`	Function to jump to the given step
`props.isFirst`	`function`	Function to check if the step is the first
`props.isLast`	`function`	Function to check if the step is the last
`props.hasPrev`	`function`	Function to check if the step has any previous step
`props.hasNext`	`function`	Function to check if the step has any next step
`props.allSteps`	`Array<{order, title}>`	Array of all available steps' title and order number
`props.state`	`object`	Combined state value of all steps
`props.setState`	`function<key, value>`	Function to set/update state by key
`props.getState`	`function<key, defaultValue>`	Function to retrieve a state value by key
`props.handleChange`	`function<event>`	`onChange` event handler for form elements

Example Component with TypeScript

While creating your step components, you may import the type definition StepComponentProps and use it for your component's props. It will give you all the available properties and methods that are available to you in the props object of the step component in your IDE's autocomplete feature.

import React from "react";
import { StepComponentProps } from "react-step-builder";

const Step1 = (props: StepComponentProps) => {
    return (
        <div>
            <input
                name="fname"
                value={props.getState("fname", "")}
                onChange={props.handleChange}
            />
            <input
                name="lname"
                value={props.getState("lname", "")}
                onChange={props.handleChange}
            />
        </div>
    );
};

export default Step1;

How to create multi-step forms in React?

Samet Mutevelli — Fri, 11 Sep 2020 19:04:23 +0000

sametweb / react-step-builder

React Step Builder allows you to create step-by-step interfaces easily.

This guide is using React Step Builder v2.0.11. If you are using the version v3+, please see the latest documentation on package's NPM page.

Creating a multi-step registration form was a challenge I faced a while back, which inspired me to create the react-step-builder package. In this post, I will make a quick demo on how to create a multi-step form using the package.

Let me briefly explain what the package does.

It provides two wrapper components: Steps and Step.

Steps is a wrapper component for Step component(s), which takes your step components, combines their state in one location, and serves the helper methods for moving between them without losing the previously collected data.

Let's start with the demo which, I believe, will make it easier to understand the problem that the package is intended to solve.

For detailed explanations, please refer to the documentation.

1. Create a new project and install the package

$ npx create-react-app rsb-demo

$ npm install react-step-builder

2. Have your step components ready

For the sake of simplicity, I will provide 3 sample components here. In the first and second components, we will ask our user to provide some info and, in the third step, render that info on the screen. Of course, in a real-life application, you probably will want to submit that data to some API of sorts. Also, you might have as many/big step components as you'd like.

At this point, step components will have zero functionality. We will empower them later with the provided methods without worrying about creating our form handlers and such.

// Step1.js
import React from "react";

function Step1(props) {
  return (
    <div>
      <p>Name: <input name="name" /></p>
      <p>Surname: <input name="surname" /></p>
    </div>
  );
}

export default Step1;

// Step2.js
import React from "react";

function Step2(props) {
  return (
    <div>
      <p>Email: <input name="email" /></p>
      <p>Phone: <input name="Phone" /></p>
    </div>
  );
}

export default Step2;

// FinalStep.js
import React from "react";

function FinalStep(props) {
  return (
    <div>
      <p>Name:</p>
      <p>Surname:</p> 
      <p>Email:</p>
      <p>Phone:</p>
    </div>
  );
}

export default FinalStep;

3. Build your multi-step form

In your App.js file, import the wrapper components, and pass your newly created step components in.

// App.js
import React from "react";

import { Steps, Step } from "react-step-builder";
import Step1 from "./Step1";
import Step2 from "./Step2";
import FinalStep from "./FinalStep";

function App() {
  return (
    <div className="App">
      <Steps>
        <Step component={Step1} />
        <Step component={Step2} />
        <Step component={FinalStep} />
      </Steps>
    </div>
  );
}

export default App;

At this point, your step components will receive helper methods and properties in their props. We will utilize them to give our multi-step form some functionality.

4. Connect the form elements to the global state

Let's go back to our Step1 component and update our form elements and provide the state value for the value property and the handler method for the onChange event.

When you create an input like this: <input name="foo" />, the value for this element is saved in your global state with the foo key. So make sure you are giving unique names for each form element. That's what we will provide for the value property in our input elements.

Now let's access to our global state and update our input elements as such:

<input name="name" value={props.getState('name', '')} /></p>
<input name="surname" value={props.getState('surname', '')} /></p>

If you realized, our getState method takes two parameters: The first one is the name of the input element, second is the default value. We pass an empty string that way we don't receive React's "uncontrolled/controlled component" warning in our console.

Now let's repeat the same changes in Step2 and FinalStep components as well.

// Step2.js
<input name="email" value={props.getState('email', '')} /></p>
<input name="phone" value={props.getState('phone', '')} /></p>

There is no form element in the FinalStep component, we are just accessing the state data that has been entered by the user previously.

// FinalStep.js
<p>Name: {props.state.name}</p>
<p>Surname: {props.state.surname}</p>
<p>Email: {props.state.email}</p>
<p>Phone: {props.state.phone}</p>

At this point, you might ask "why did we access the state with the props.getState('name', '') method earlier but with props.state.name in the last one. The answer is simple: this.props.name is undefined until your user starts typing in the field. However, props.getState('name', '') returns an empty string (thanks to the second parameter we passed) even if the user hasn't typed anything in the input yet. That way your form element gets its default value as an empty string so that you don't encounter the controlled/uncontrolled component error from React.

Now it is time to add onChange handlers so that our form saves user inputs into our global state.

Let's update our step components and give them a handler method for the onChange event.

<input name="name" value={props.getState('name', '')} onChange={props.handleChange} /></p>
<input name="surname" value={props.getState('surname', '')} onChange={props.handleChange} /></p>

We did onChange={props.handleChange} to all of our form elements. It will make sure that our form values are saved with the correct key to our global state properly.

NOTE: You may also manipulate your global state with props.setState(key, value) method. It can be used for cases where synthetic React events (e.g. onChange) are not available. For example, clicking on an image or text and updating the state with the onClick method.

Our steps are ready now. Let's work on previous and next buttons so we can take a look around.

5. Utilize previous and next functionality

Every step will have props.next() and props.prev() methods for moving between steps. I will follow the first instinct and create Next and Previous buttons accepting those methods in their onClick events.

<button onClick={props.prev}>Previous</button>
<button onClick={props.next}>Next</button>

You may add these buttons to every single step component individually or, to improve maintainability, you may also create a Navigation component. I will explain the Navigation component later in this post.

Now as the last step, let's talk about built-in methods of the individual steps.

6. Disable/conditionally render the navigation buttons

As it probably popped in your head, what if we don't want to show the Previous button in the first step component or the Next button in the last step component since there is no previous/next step in the first/last steps. The below-mentioned helper methods are very practical to solve this problem.

// From the documentation
props.step.isFirst() - Returns true if it's the first step, otherwise false
props.step.isLast() - Returns true if it's the last step, otherwise false
props.step.hasNext() - Returns true if there is a next step available, otherwise false
props.step.hasPrev() - Returns true if there is a previous step available, otherwise false

If you would like to use the disable approach, you may do something like this:

<button disabled={props.step.isFirst()} onClick={props.prev}>Previous</button>
<button disabled={props.step.isLast()} onClick={props.next}>Next</button>

And this is the conditional rendering approach:

{props.step.hasPrev() && <button onClick={props.prev}>Previous</button>}
{props.step.hasNext() && <button onClick={props.next}>Next</button>}

Now let's add one global Navigation component to render in every step using the config object.

Create a Navigation component like this:

const Navigation = (props) => {
  return (
    <div>
    <button onClick={props.prev}>Previous</button>
    <button onClick={props.next}>Next</button>
    </div>
  );
};

Now let's create the config object.

const config = {
  navigation: {
    component: Navigation,
    location: "before", // or after
  }
};

Finally, let's pass this object to our Steps component.

<Steps config={config}>
  // your Step components
</Steps>

Update v.2.0.7
You can pass additional before or after properties to the config object. These properties accept a component identical to the Navigation component. As their name suggests, the component you pass to before / after property is rendered before/after the Step components.

NOTE: If you want to pass your own props to your step components, you may do so by simply passing props to Step components directly. Your step component will receive those props automatically.

Here is the final result:

Here is a working example on codesandbox:

Please refer to the documentation as it provides a detailed explanation of each method and its use.

DEV Community: Samet Mutevelli

My experience in re-writing a simple library 3 times in 2 years

What Changed and How

Global state management feature is removed

Unintuitive Step component is removed

A Custom Hook created for shared methods

Finally...

Things to do in your personal projects for your first job

Know how to work with data

1. Be "jack-of-all-trades" and "master-of-one" at the same time

Polish your projects

Conclusion

Answers to Job Search Questions

About Me

Statistics

Mental State

Coding Challenges and Take-Home Assignments

Resume

Cover Letter

GitHub Profile

LinkedIn & Networking

Portfolio Site

Job Search Process

Closing Thoughts

Preventing memory leak by handling errors and request cancellations separately in Axios

Problem

Solution

Conclusion

Converting class components to functional components (basic structure, state, & life-cycle methods)

Table of Contents

Basic Structure

State

Life-cycle methods

TL;DR

Basic Structure

Binding class methods

this keyword

render() method

props object

State

Creating state

Updating state

Consuming state

Life-cycle Methods

componentDidMount

componentDidUpdate (prevProps, prevState)

componentWillUnmount

Final Thoughts

Multi-step forms with React & TypeScript

Table of Contents

Overview

What's changed?

The New API

Example Component with TypeScript

How to create multi-step forms in React?

sametweb / react-step-builder

React Step Builder allows you to create step-by-step interfaces easily.

1. Create a new project and install the package

2. Have your step components ready

3. Build your multi-step form

4. Connect the form elements to the global state

5. Utilize previous and next functionality

6. Disable/conditionally render the navigation buttons

`this` keyword

`render()` method

`props` object