I'm using useContext and setState hooks to share an array of audiotracks across my site. i have a few playlist components which can add/remove tracks to the global playlist as well as a wrapper for the audio element that can e.g. retrieve next track when current finishes.
The playlists all use the same Component. Each Track is basically just a <tr> with <td>s containing id,title,url.. and so on. I generate these using json.
Now my question is what should I pass around in my hooks? Because I see at least 3 options... I could pass the
passing track_id seems most efficient but.. but whenever I need the tracks data.. e.g. to get the url or to render I need to find the object which could be anywhere nested in my json backend.
passing the dom-node seems wrong... but would be very easy to use in case i want to render the list somewhere else.
if you pass the track json object.. I have all the data I need at any point.. but i somehow need to attach it to all track dom nodes.. and that again seems not right too..
Option #1. track.json object
{"title":"...","artist":"...","year":"..."}
Option #2. <tr> dom-node
<tr><td>title</td><td>arist</td><td>year</td></tr>
key={track_id}
Now I would obviously like to follow best-practice and be as efficient as possible.. so can somebody point me in the right direction
I think all will do the same thing. If you pass an id or json then it will still need to be rendered in a dom node to be viewed, so when you say pass a dom node your really just passing a string. Am I correct in saying that no matter what is passed it will need to go through some sort of function to get the song from the back end? If so, then my suggestion would be json.