So I begin yet another blog post by prefacing just how terrible I am at coding. My skill level, or lack thereof, is improving however, but just how much can one know when they basically have embarked on this journey just 4-5 weeks ago. Needless to say, this post is going to reflect on the USE of
useState()
within React. See what I did there? Yes, I am corny, but aware enough to know I am doing it on purpose. Ha.
This is a topic that I could not wrap my head around at first. Even now after passing my code challenge at Flatiron School, do I really know what I'm doing or talking about? Hopefully the answer is a yes and you understand where I go with this. It does make more sense to me now, and setting state within a component is so important. At first I thought it did not matter, that you could just move the state variable or the setter function at any point. However, knowing where to place state is crucial and can make life easier as you code, especially as children components cannot pass props directly to a parent unless via a callback function. More on components a bit later.
A brief explanation of useState() before moving forward. It can only be used within a functional component. It also consists of a variable and a function that updates the variable, and we can set the initial value depending on what we're working on. If it's forms, it will be an empty string, if we're working with something like a toggle button, we may use the boolean data type. Again, it all depends what you're trying to do so always proceed with caution and make sure what you're trying to do makes sense.
const [state, setState] = useState(initialState);
I look back at an example from one of our labs, where from the app component, there are two branches that separate, a header component and a container component that was used to render images onto (what is rendering is not important right now). Just keep in mind that in the hierarchy, app is at the top, the parent component, and header and container branch down from app, they are the children components of app. From here, the header also branched down to a search bar component, now 2 levels away from the main parent, app.
From the lab example, we had to render some images onto the container component, which we do with a fetch request using the
useEffect() {
fetch(\\url here)
.then()
.then()
//
}
hook built into React. Once you've got that going, one of the deliverables was to be able to filter search results. Ideally, you render your images within the container, however, you can also render them within app and from there, move the data as a prop to the container. You will have needed to use useState() for fetching your image data and passing it over. Already seeing the intricacies of this hook already.
Now remember the search bar component, well that's basically on the other side of the hierarchy, under header, and if you recall, children cannot pass props back to parents or from adjacent children components either. Because there is going to be a change when a user types to search for something, we need to create a state for the search. Now where we create this state for search matters and can make life a bit more simple or cause us to do a bit more work. I'll explain it the way I did it. I set the state for search within app, because from app, you can send the initial state variable or the function to any child. In this particular case, we send the variable to the container component, as a prop, because in this component is where all our data is rendered and where we can filter the results. However, the function will update the change to the variable and so we send this to the search bar component, via the header first because we must respect the hierarchy, as a prop. In the search bar component we have a form. This form will change accordingly to whatever the user types, so the function will change the initial state of the variable, which has travelled to the opposite end of the hierarchy tree and will only display whatever is searched.
Rather long and complicated explanation from a novice. The main take away from this is the importance of the useState() hook and how it allows you to change the initial state of a component and its objective, or what that component is meant to do in your overall application. From my example, the search bar and the container are two separate components under different branches. They cannot communicate directly but do so indirectly, via useState().
Top comments (0)